显示div取决于选择选项

哦，帮助，我已经尝试了一百万种不同的方式，但它仍然无法正常工作：如果您从选择/选项框中选择更新或最终，它应该显示具有输入的div在它的领域。它只执行switch语句中默认显示的内容。当然，只有在做出选择之后，我才能确定它是否显示输入字段。显示div取决于选择选项

头部分

...

$(document).ready(function(){ 
$('#needfilenum').hide(); 
var optionValue = $("#needtoshow").val(); 

switch (optionValue) 
{ 
case 'update': 
$("#needfilenum").show(); 
break; 

case 'final': 
$("#needfilenum").show(); 
break; 
default: 
$("#needfilenum").hide(); 
break; 
    } 
}); 
//}); 

'<select id="needtoshow" > 
<option id="dfaut" value="0">Select Something</option> 
<option id="update" value="update">Update</option> 
<option id="final" value="final">Final</option> 
<option id="allergy"value="allergy">Vegan</option> 
</select> 
<div id="needfilenum" style="background:#f00;"> 
<input type="text" name="wharever" /> 
</div>

我可以改变交换机的默认这似乎决定了它显示还试图

// $("#needtoshow").change(function() { 

//  switch ($(this).val())

来源

2009-11-06 Leigh

使用代码格式显示您的代码 – 2009-11-06 22:52:18

以及我以为我按照指示发布我会转贴 – Leigh 2009-11-06 23:00:45

注意：你不能给ID为

你应该看看change()事件。附加到你的<select>然后执行你的逻辑。

来源

2009-11-06 22:35:49 Chris

对变化事件要非常小心。他们在IE和Firefox中的行为不同（IE一直等到模糊才开启它）。肯定在单选按钮和复选框，不知道是否也选择。 – Victor 2009-11-06 22:39:25

谢谢。我没有意识到差异。 – Chris 2009-11-06 22:45:07

尝试是这样的：

var selectBox = $("#oldfilenum"), magicDiv = $("#needfilenum"); 
selectBox.bind("change", function() { 
    var val = this.value; 
    if (val === "update" || val === "final") { 
     magicDiv.show(); 
    } else { 
     magicDiv.hide(); 
    } 
});

当然你也可以使用switch代替，或具有可接受值的[]做it.indexOf(val) > -1或什么的。

维克多在另一个答案评论，change大火在MSIE blur，所以你可能需要使用另一个event如果这是一个问题，也许mouseup。

来源

2009-11-06 22:36:32 nlogax

您可能想要在选择框上绑定事件侦听器。（change event）所以，你会沿着线的东西：

$("#oldfilenum").change(function() { 
    var optionValue = $(this).val(); 
    switch (optionValue) { 
    case 'update': 
     $("#needfilenum").show(); 
     break; 
    case 'final ': 
     $("#needfilenum").show(); 
     break; 
    default: 
     $("#needfilenum").hide(); 
    } 
};

来源

2009-11-06 22:37:05 Simon

你的检查功能只运行一次，而不是每次更改选择栏时间。你需要把一个onchange处理程序到选择栏：

<select id="needtoshow" onchange="your_function_name_here()">

来源

2009-11-06 23:32:36

不坏不习惯，你应该避免内联javascripting。 – Sinan 2009-11-06 23:53:44

感谢pekka，我很高兴今天加入这个网站。 – Leigh 2009-11-07 00:16:38

如果你想有DIV显示，当下拉的变化，你需要绑定到更改事件，例如隐藏：

$(document).ready(function() { 
    $('#needfilenum').hide(); 

    $('#needtoshow').bind('change', function() { 
    var optionValue = $("#needtoshow").val(); 

    switch (optionValue) 
    { 
     case 'update': 
     case 'final': 
     $("#needfilenum").show(); 
     break; 

     default: 
     $("#needfilenum").hide(); 
     break; 
    } 
    }); 
});

在您的代码中，switch语句只在第一次加载页面时运行一次。

来源

2009-11-06 23:33:40

谢谢。这工作很好......都在ie和ff – Leigh 2009-11-07 00:14:43

显示div取决于选择选项

回答

相关问题