Cannot change dropdown value using JQuery
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/jq开发者_开发百科uery/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>
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>
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
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();
}
加载中,请稍侯......
精彩评论