Question

下面的代码不适用于IE8，但在FF上完美运行。我不确定主要原因是什么。警报出来但下拉值没有变化。有人可以帮助我吗？

<!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>

Answer 1

我没有准确地说明你想要达到的目标，但是如果你想重置一个选择的值，如果有两个选择被选中（在警报之后）你应该改变

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

到

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

如果这不是您想要的，请尝试更清楚您想要的价值

Answer 2

要使其在多浏览器中运行，请更改此

<!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>

Answer 3

要设置下拉菜单，您需要设置正确选项的selected属性。

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

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

并且检索值的正确方法是

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

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

无法使用JQuery更改下拉列表值

3 个答案: