使用jQuery获取和设置下拉框的值

Question

使用jQuery获取和设置下拉框的值

3

如果用户从下拉菜单中选择一个选项，它将在文本框中显示，但如果他选择的选项值为“其他”，则会出现一行用于输入其他值。

我的代码运行良好，除非选项值不等于“其他”。

<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>

但是它不能显示/隐藏并且不能在文本框中设置值。

如果可以使用jQuery解决，我将非常感谢您的代码。

谢谢。

- PHP Ferrari

2个回答

1

我喜欢karim79的回答，但更喜欢它更紧凑一些:

$(function() {
    $("select[name=choice1]").change(function() {
       $("#ShowHide").toggle($(this).val() === "other");
    });
});

不要使用$(document).ready(f)，而是使用$(f)，它们完全相同
不要使用松散的==，使用===进行精确比较（在这种情况下没有关系，但==可能会表现奇怪，因此应该避免在任何地方使用它）
使用toggle(b)代替show()/hide()

- Svante Svenson

我没意识到toggle接受一个布尔值！很好而且简洁。 - brad

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- karim79 · Accepted Answer

像这样做：

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

且不要使用内联的onchange函数调用。在这里尝试一下。