javascript - jquery获取多个选择框的选定值

Question

我有这个表格..

<form method="post" action=''>

    <select class="first">
       <option value="0">choose ...</option>
       <option value="1">Hello</option>
       <option value="3">It's</option>
    </select>

    <select class="second">
       <option value="0">choose ...</option>
       <option value="2">World</option>
       <option value="4">me</option>
    </select>

    <input type="text" class="dest" value="" />

</form>

并且希望使用 jQuery 动态收集选定的信息，因为我需要决定选定的值...

当您选择 OPTION 值的特定组合(例如 Hello + World)时，它应该向 INPUT.dest 添加一些值并将其锁定(禁用编辑)...

但我无法让它工作......我所拥有的是，在每个选择的每次更改(仅单独)中，我可以映射实际值

  $(document).ready(function () {

    $(".first").change(function () {        
        var option = $(this).find("option:selected").val();
        $(".dest").val(option);
    });

    $(".second").change(function () {        
        var option2 = $(this).find("option:selected").val();
        $(".dest").val(option2);
    });

  });

这是live demo in fiddle

你知道我错过了什么吗？我知道这只是一件小事..谢谢

Answer 1

我会概括它并使用一个事件监听器，然后收集组合并执行任何操作:

$("select").change(function () {        
    var first = $(".first").find("option:selected").val();
    var second = $(".second").find("option:selected").val();

    if(first == 1 && second == 2)
            $(".dest").val("Hello world").prop("disabled",true);
    else
         $(".dest").val("Something else").prop("disabled",false);
});

http://jsfiddle.net/cxx428af/3/