选择不正确的值HTML <select> </select>

时间:2014-03-09 22:04:00

标签: javascript jquery

我有HTML:

 <select class="form" id="select" name="select">
            <option>number1</option>
            <option>number2</option>
    </select>

 <select name="organisation" class="form" id="cent" required>
            <option value="1">UK</option>
            <option value="2">SPAIN</option>
</select>

另一个<select>

 <select class="form" id="ssip" name="organisation">
    <option value="47" >US</option>
   <option value="48">UKRAINE</option>
</select>

JQuery显示在1 - 首先选择2秒

$(document).ready(function() {
    $("#select").each(function () {
        if (this.value == "1") {
            $('#cent').show();
            $('#ssip').hide();
        }
        if (this.value == "2") {
            $('#cent').hide();
            $('#ssip').show();
        }
    });
});

问题是,当我选择选项number1时,首先选择值为1和2,但是当我选择值为1的UK时,单击提交它的第二个选择第一个选项的发送值47。

3 个答案:

答案 0 :(得分:2)

您正试图循环一个选择框..

$("#select").each(function () {

只能有一个id为“select”的元素。你应该检查:

if ($("#select").value() == "1") { ..

你的第一个选择选项中甚至没有值..

答案 1 :(得分:2)

尝试在切换select时禁用相反的选择。如果表单的控件显示设置为none,则仍会提交表单控件,但如果控件被禁用,则不会随表单一起提交。

$(document).ready(function() {
    $("select").change(function () {
        if (this.value == "number1") {
            $('#cent').show().prop("disabled", false);
            $('#ssip').hide().prop("disabled", true);
        }
        if (this.value == "number2") {
            $('#cent').hide().prop("disabled", true);
            $('#ssip').show().prop("disabled", false);
        }
    });
});

JS小提琴: http://jsfiddle.net/bTJsH/

答案 2 :(得分:1)

我可能会建议这样的事情

$('#select').on('change', function() {

   var selected = this.selectedIndex;

   $('.orgs').hide();

   switch(selected) {
        case 1:
            $('#ssip').show();
            break;
        case 2: 
            $('#cent').show();
            break;
    }
});

这是一个工作示例http://jsfiddle.net/pixelchemist/7ZGwy/