Fatal编程技术网
  • jquery/
  • 无法使用JQuery更改下拉列表值

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

jquery drop-down-menu

无法使用JQuery更改下拉列表值,jquery,drop-down-menu,Jquery,Drop Down Menu,我下面的代码在IE8上不起作用，但在FF上可以完美地工作。 我不确定主要原因是什么。 警报出现，但下拉值不变。 有人能帮我吗 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> <script type='text/javascript' src='http://ajax.googl

我下面的代码在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>


无标题
$（文档）.ready（函数（）
{
$（“#选择1”）.更改（函数（）{
if（$（“#选择1”）.val（）&&&！$（“#选择2”）.val（））
{
$（“#output”）.html（$（“#choice1”）.val（））；
}
else if（！$（“#选择1”）.val（））
{
$（“#output”）.html（$（“#choice1”）.val（））；
}
else if（$（“#choice2”）.val（））
{
$（“选择1”）.val（“选择1”）；
警报（'仅选择一个！'）；
}
});
$（“#选择2”）.更改（函数（）{
如果（$（“#选择2”）.val（）&&&！$（“#选择1”）.val（））
{
$（“#output”）.html（$（“#choice2”）.val（））；
}
else if（！$（“#选择2”）.val（））
{
$（“#output”）.html（$（“#choice2”）.val（））；
}
else if（$（“#choice1”）.val（））
{
$（“选择2”）.val（“选择2”）；
警报（'仅选择一个！'）；
}
});
});
选择1
10
20
30
选择2
100
200
300
我并不完全理解您想要实现的目标，但是如果您想要在选择两个选择时重置一个选择的值（警报后），您应该更改

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

如果这不是您想要的，请尝试更清楚地了解要使其在多浏览器中工作所需的值，请更改此项

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


无标题
$（文档）.ready（函数（）
{
$（“#选择1”）.更改（函数（）{
if（$（“#选择1”）.val（）&&&！$（“#选择2”）.val（））
{
$（“#output”）.html（$（“#choice1”）.val（））；
}
else if（！$（“#选择1”）.val（））
{
$（“#output”）.html（$（“#choice1”）.val（））；
}
else if（$（“#choice2”）.val（））
{
$（“#选择1选项[value=0]”）。attr（'selected'，'selected'）；
警报（'仅选择一个！'）；
}
});
$（“#选择2”）.更改（函数（）{
如果（$（“#选择2”）.val（）&&&！$（“#选择1”）.val（））
{
$（“#output”）.html（$（“#choice2”）.val（））；
}
else if（！$（“#选择2”）.val（））
{
$（“#output”）.html（$（“#choice2”）.val（））；
}
else if（$（“#choice1”）.val（））
{
$（“#选择2选项[value=0]”）。attr（'selected'，'selected'）；
警报（'仅选择一个！'）；
}
});
});
选择1
10
20
30
选择2
100
200
300
要设置下拉列表，您需要设置正确选项的
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();
}
可能重复的 
function getDropdownValue( ddownId ) {
    // $("#choice1 option:selected").val();

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