onchange - 使用jquery选择的下拉列表

时间:2012-05-08 02:23:35

标签: javascript jquery

我在标题中有一个下拉列表,无论在标题中选择的值应该在详细信息下拉列表中反映出来,我应该怎么做?任何线索?

$("#myddl").change(function()
{ 
     //update all the dropdown list...  
});

http://jsfiddle.net/abuhamzah/4QvfP/

  Header:
    <br />
    <select id="myddl" name="myddl">
        <option value="1">One</option>
        <option value="2">Twooo</option>
        <option value="3">Three</option>
    </select>
    <p>Detail</p>
        <br />
    <select id="Select1" name="myddl">
        <option value="1">One</option>
        <option value="2">Twooo</option>
        <option value="3">Three</option>
    </select>
    <br />
    <select id="Select2" name="myddl">
        <option value="1">One</option>
        <option value="2">Twooo</option>
        <option value="3">Three</option>
    </select>
    <br />
    <select id="Select3" name="myddl">
        <option value="1">One</option>
        <option value="2">Twooo</option>
        <option value="3">Three</option>
    </select>
    <br />
    <select id="Select4" name="myddl">
        <option value="1">One</option>
        <option value="2">Twooo</option>
        <option value="3">Three</option>
    </select>
    <br />
    <select id="Select5" name="myddl">
        <option value="1">One</option>
        <option value="2">Twooo</option>
        <option value="3">Three</option>
    </select>

5 个答案:

答案 0 :(得分:4)

这些方面的东西都可行。它将您在容器中的“详细信息”选项包装起来,使选择更加简单。

http://jsfiddle.net/qMXSR/2/

$("#myddl").change(function()
{ 
     $('.detail').find('select').val($(this).val());
});​

答案 1 :(得分:2)

使用$.on绑定到“更改”事件。在此处,我们定位selectid开头的所有Select元素 - 其中包括以下所有内容。然后我们将它们的值设置为当前值。

​$("#myddl").on("change", function(o){
   $("select[id^=Select]").val(o.target.value);
});​​​​​​​​​​

答案 2 :(得分:1)

此代码将执行此操作:

$(document).ready(function()
{
    $("#myddl").live('change', function()
    {
        $("#Select1, #Select2, #Select3, #Select4, #Select5").val($(this).val());
    });
});

更新的JS Fiddle在这里:http://jsfiddle.net/leniel/4QvfP/7/

答案 3 :(得分:1)

​$(function(){
    $('#myddl').change(function(){
        var value = $(this).val();
        $('select[name=myddl] option[value='+value+']').attr('selected', 'selected');
    });
})​

答案 4 :(得分:0)

在第一个下拉列表的onchange中,你可以jQuery选择其他下拉列表并使用.each()来迭代并设置其他选项。