得到&使用jQuery设置下拉值

时间:2010-05-10 15:20:36

标签: javascript jquery html

如果用户从下拉列表中选择一个选项,它会将其显示为文本框,但如果他选择的值为“其他”的选项,则会出现一行为其他人键入值。

我的代码工作正常,除非选项值不等于“其他”

<script type="text/javascript"><!--
function setAndReset(box) {
if(box.value == 'Other'){
    $("#ShowHide").hide();
}
document.FormName.hiddenInput.value = box.value;

}
//-->
</script>

<body bgcolor="#ffffff">
<form id="FormName" action="" method="get" name="FormName">
    <select name="choice1" size="1" onchange="setAndReset(this);">
    <option value="one">first</option>
    <option value="two">second</option>
    <option value="three">third</option>
    <option value="other">Other</option>
    </select>

    <input type="text" name="hiddenInput" value="">
    <tablt><tr id="ShowHide"><td>
        <input type="text" name="otherInput">
    </td></tr></table>
    <input type="submit" name="submitButtonName">
</form>
</body>

但它没有显示/隐藏&amp;没有在文本框中设置值。

如果使用jquery解决,那么我会感谢您的代码。

感谢。

2 个答案:

答案 0 :(得分:5)

这样做:

$(document).ready(function() {
    $("select[name=choice1]").change(function() {
       $(this).val() == 'other' ? $("#ShowHide").show() : $("#ShowHide").hide();
    });
});

并丢失内联onchange函数调用。 Try it here

答案 1 :(得分:1)

我喜欢karim79的答案,但更喜欢它更紧凑:

$(function() {
    $("select[name=choice1]").change(function() {
       $("#ShowHide").toggle($(this).val() === "other");
    });
});
  • 而不是$(document).ready(f),而是$(f),它完全相同
  • 使用==代替松散===进行精确比较(在这种情况下无关紧要,但==行为奇怪,所以你应该避免它到处都是)< / LI>
  • 使用toggle(b)代替show() / hide()