i have a dropdown in the header and whatever the value is selected in the header should reflect the same in the detail dropdown, how should i do that? any leads?

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

/

  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>

i have a dropdown in the header and whatever the value is selected in the header should reflect the same in the detail dropdown, how should i do that? any leads?

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

http://jsfiddle/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>

• javascript
• jquery

• thank you all, let me try and get back to you. – Nick Kahn Commented May 8, 2012 at 2:42

5 Answers 5

Something along these lines will work. It wraps your "Detail" selects in a container to make selection somewhat simpler.

http://jsfiddle/qMXSR/2/

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

Use $.on to bind to the "change" event. From here we target all select elements whose id begins with Select - which includes all of those below. Then we set their value(s) to that of the current one.

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

This code will do it:

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

The updated JS Fiddle is here: http://jsfiddle/leniel/4QvfP/7/

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

In the onchange of the first dropdown, you can jQuery select the other dropdowns and use a .each() to iterate and set the other options.