Cannot change dropdown value using JQuery

Question

My code below is not working on IE8 but work perfectly at FF. I am not sure what is the main cause. The alert came out but the dropdown value not changing. Can someone help me out?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type="text/javascript">

$(document).ready(function()
{

    $("#choice1").change(function(){
        if($("#choice1").val() && !$("#choice2").val())
        {
            $("#output").html($("#choice1").val());
        }
        else if(!$("#choice1").val())
        {
            $("#output").html($("#choice1").val());
        }
        else if($("#choice2").val())
        {
            $("#choice1").val("Select 1");
        alert('Choose one only!');
        }
    });

    $("#choice2").change(function(){
        if($("#choice2").val() && !$("#choice1").val())
        {
            $("#output").html($("#choice2").val());
        }
        else if(!$("#choice2").val())
        {
            $("#output").html($("#choice2").val());
        }
        else if($("#choice1").val())
        {
            $("#choice2").val("Select 2");
       alert('Choose one only!');
        }
    });

});

</script>
</head>
<body>
    <select id="choice1" class="choice1">
        <option value="" selected="selected">Select 1</option>    
        <option value="10">10</option>    
        <option value="20">20</option>    
        <option value="30">30</option>    
    </select>

    <select id="choice2" class="choice2">
        <option value="" selected="selected">Select 2</option>    
        <option value="100">100</option>    
        <option value="200">200</option>    
        <option value="300">300</option>    
    </select>
    <br>
    <div id="output"></div>
</body>
</html>

possible duplicate of [Change the selected value of a drop-down list with jQuery](http://stackoverflow.com/questions/499405/change-the-selected-value-of-a-drop-down-list-with-jquery) — balexandre, Jun 08 '11 at 07:01

score 0 · Answer 1 · answered Jun 08 '11 at 06:58

I don't understend exactly what you want to achieve, but if you want to reset the value of a select if two select are choese (after the alert) you should change

$("#choice1").val("Select 1");//After the first alert
$("#choice2").val("Select 2");//After the second alert

to

$("#choice1").val("");//After the first alert
$("#choice2").val("");//After the second alert

If this is not what you are looking for try to be more clear about what value you want

score 0 · Accepted Answer · answered Jun 08 '11 at 07:00

To make it working multi-browser, change this,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type="text/javascript">

$(document).ready(function()
{

    $("#choice1").change(function(){
        if($("#choice1").val() && !$("#choice2").val())
        {
            $("#output").html($("#choice1").val());
        }
        else if(!$("#choice1").val())
        {
            $("#output").html($("#choice1").val());
        }
        else if($("#choice2").val())
        {
            $("#choice1 option[value=0]").attr('selected', 'selected');
        alert('Choose one only!');
        }
    });

    $("#choice2").change(function(){
        if($("#choice2").val() && !$("#choice1").val())
        {
            $("#output").html($("#choice2").val());
        }
        else if(!$("#choice2").val())
        {
            $("#output").html($("#choice2").val());
        }
        else if($("#choice1").val())
        {
            $("#choice2 option[value=0]").attr('selected', 'selected');
       alert('Choose one only!');
        }
    });

});

</script>
</head>
<body>
    <select id="choice1" class="choice1">
        <option value="0" selected="selected">Select 1</option>    
        <option value="10">10</option>    
        <option value="20">20</option>    
        <option value="30">30</option>    
    </select>

    <select id="choice2" class="choice2">
        <option value="0" selected="selected">Select 2</option>    
        <option value="100">100</option>    
        <option value="200">200</option>    
        <option value="300">300</option>    
    </select>
    <br>
    <div id="output"></div>
</body>
</html>

score 0 · Answer 3 · answered Jun 08 '11 at 07:10

In order to set a dropdown, you need to set the selected attribute of the correct option.

function setDropdownValue( ddownId, val ) {
    // $("#choice1 option[value='10']").attr("selected", true);

    $("#" + ddownId + " option[value='" + val + "']")
        .attr("selected", true);
}

and the correct way to retrieve the value is

function getDropdownValue( ddownId ) {
    // $("#choice1 option:selected").val();

    return $("#" + ddownId + " option:selected").val();
}

Cannot change dropdown value using JQuery

3 Answers3