在单选按钮列表中选择选项时更改图像

注意：这是一个重新提出的问题，旨在更清楚地说明问题和信息 。

好的……我正在开发一个具有表单的我的站点项目，并使用RadioButtonList控件作为项目类别。 在一个特定的类别中，我的收音机列表控件有4个这样的vaules：

  AMD Intel AMD Dual (Server) Intel Dual (Server)      

在列表控件旁边，我有一个名为Image6的默认图像控件。 当我选择一个单选按钮列表选项时，我很难让这个图像发生变化。 代码没有爆炸，但没有任何反应，图像在无线电选项选择中保持不变。 我尝试了类似示例中的各种方法，但没有一个方法有用。

我已经尝试过JQuery for my script，以及简单的旧JavaScript，但都无济于事。 我知道我需要让脚本引用我在解决方案的Images目录中的图像，但我无法弄明白。 默认图像是Icon_CPU.jpg ，对于每个选项，比如……前两个，它将更改为以下内容：

1. AMD选择= AMD_CPU_1.jpg
2. 英特尔选择= Intel_CPU_2.jpg

… 等等。 如果硬编码，图像将正确对齐 – 我只是无法让代码在选择上工作。 有些人可以通过脚本帮我实际完成这项工作吗？ 另外，你能告诉我是否需要重命名控件，或者在服务器端控件的PageLoad中添加任何内容吗？ 目前，我没有任何内容，如下所示。

 public partial class Controls_CPUBuilderForm : System.Web.UI.UserControl { protected void Page_Load(object sender, EventArgs e) { } protected void btnResetBuild_Click(object sender, EventArgs e) { // Clear radio button selections on the form radFormSelect.ClearSelection(); radDriveType.ClearSelection(); radDriveSpace.ClearSelection(); radPSUSelect.ClearSelection(); radRAMSelect.ClearSelection(); radCPUType.ClearSelection(); radOpticalCount.ClearSelection(); radScreenCount.ClearSelection(); // Reset drop down lists to original selection ddlDriveCount.SelectedIndex = -1; ddlScreenOrient.SelectedIndex = -1; } } 

感谢大家的耐心和知识，帮助我更好地理解未来的目的！

Answer 1

要使用C＃解决您的问题，请在代码隐藏中为SelectedIndexChanged创建一个事件处理程序。

  protected void radCPUType_SelectedIndexChanged(object sender, EventArgs e) { // Set the ImageUrl however you like Image6.ImageUrl = "~/Images/Icon_CPU.jpg"; } 

接下来，优化单选按钮列表以设置AutoPostBack =“True”和OnSelectedIndexChanged =“radCPUType_SelectedIndexChanged”

  AMD Intel AMD Dual (Server) Intel Dual (Server)  

Answer 2

感谢大家的建议。 非常感谢“KENT ANDERSON” – 他提供了我能够扩展的框架，以获得我正在寻找的function。

也就是说，答案是在控件的CodeBehind中创建一个事件处理程序，如下所示：

 protected void radCPUType_SelectedIndexChanged(object sender, EventArgs e) { // This was Kent's suggestion, and also to setup the ImageUrl as needed. Image6.ImageUrl = "~/Images/MyDefault.jpg"; } 

在设置控件上的选项之前，我将ImageUrl设置为最初保持默认图像。 接下来，我需要一种方法来填充选择的图像。 由于许多建议有不同甚至更复杂的方法来实现这一点，我发现我可以通过将控件作为参数传递给指定值，通过事件处理程序中的if-else结构来实现：

 protected void radCPUType_SelectedIndexChanged(object sender, EventArgs e) { // Setup the ImageUrl. Image6.ImageUrl = "~/Images/MyDefault.jpg"; // Setup the if-else structure to assign images w/ the selections. if (radCPUType.SelectedValue == "A selected option value") { Image6.ImageUrl = "~/Images/Associated Image.jpg"; } else if (radCPUType.Selectedvalue == "Another selected option value") { Image6.ImageUrl = "~/Images/Another Associated Image.jpg") } else { Image6.ImageUrl = "~/Images/The Default Image.jpg"; } } 

因为RadioButtonList控件使用基于值的索引 ，所以需要SelectedValue类，因此控件可以保持选项选择，如在无线电列表的HTML中指定的那样。

if部分中的控件等于单选按钮列表中选择的选项; 然后，下一个语句将与选项选择相关联的图像分配给ImageUrl ，当然，我使用else if来查看剩余的单选列表选项，以结构的结束else部分中的默认图像结束。 这是成功的！ 再说一遍，因为我确信还有其他方法可以实现解决方案，这对我来说效果最好。

再次感谢您的所有投入，以及对肯特安德森的另一个投射，他的建议提供了建立基础。

Answer 3

首先，让我们在代码隐藏中附加JS事件

 radCPUType.Attributes.Add("onclick", "changeImage();"); 

然后我们需要创建JS函数。

我没有对此进行过测试，但如果出现问题，请告诉我。

Answer 4

答案直接解除了上一个问题：

ASPX

   AMD Intel AMD Dual (Server) Intel Dual (Server)      

JavaScript的

 $(document).ready(function () { $("#<%= yourID.ClientID %> input").click(function () { var value = $(this).val(); var image_name; var image_path = "/Images/"; //If the images directory isn't at the website root you could use asp.nets //resolveURL method instead switch (value) { case "AMD": image_name = '"AMD_CPU_1.jpg"; break; case "Intel"; image_name = "Intel_CPU_2.jpg" break; case "AMD Dual (Server)"; image name = "" // Insert your image here break; case "Intel Dual (Server)"; image name = "" // Insert your image here break; } /************************************* *Old Ineeficient code if (value == 'AMD') { image_name = "AMD_CPU_1.jpg"; } else { if (value == 'Intel') { image_name = "Intel_CPU_2.jpg"; } else { image_name = "Icon_CPU.jpg"; } } *************************************************/ //console.log(image_name); $("#<%= Image6.ClientID %>").attr('src', image_path + image_name); }); }); 

<% %>是服务器代码块，应该在aspx页面中谨慎使用。 <%= %>是<% Response.Write() %>简写。 如果您在浏览器中查看页面的源HTML代码，您将在jQuery选择器中看到单选按钮列表和图像控件的ASP.net客户端ID。

如果您获得意外结果，也应使用FireBug for Firefox或Chrome开发人员工具等工具检查图像的路径。 另请注意//console.log(image_name);行//console.log(image_name); 。 从此行删除注释会将image_name的值转储到控制台，这对于调试很有用。 在这里查看更多信息： http ： //blogs.msdn.com/b/cdndevs/archive/2011/05/26/console-log-say-goodbye-to-javascript-alerts-for-debugging.aspx

边注

我在这里看不到图像控制。 一个普通的旧HTML图像标记可以工作。 如果您使用图像标记，您将无法获得原始问题中的asp.net名称修改，并且可以使用$("#Image6")简单地引用它

有关switch语句的更多信息，如果您不熟悉它： https ： //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch