如何设置一个等于另一个的选择框？

我有两个相同的选择框（当然除了它们的名字），我需要将第二个选择框的值设置为等于复选框被选中时的第一个值。这里是我的代码部分：如何设置一个等于另一个的选择框？

<form id="theForm" name="theForm"> 

<select name="stateSelect" id="stateSelect"> 
     <option value="AL">Alabama</option> 
     <option value="AZ">Arizona</option> 
     <option value="AR">Arkansas</option> 
</select> 

<select name="stateSelect2" id="stateSelect2"> 
     <option value="AL">Alabama</option> 
     <option value="AZ">Arizona</option> 
     <option value="AR">Arkansas</option> 
</select> 

<input type="checkbox" name="checky" onClick="doStuff()"> 
</form> 

doStuff() 
{ 
    // change it from here 
}

所以，我已经尝试了一堆不同的东西，包括代码我已经在论坛和SO发现，但似乎没有任何工作。我应该在我的javascript函数中使用哪些代码，以便在函数运行第二个选择框时将其设置为等于第一个？

感谢您的帮助！

来源

2012-03-25 Nate

你有没有启用jQuery或其他JS框架？我宁愿问，因为没有它会更复杂一些。 – haltabush 2012-03-25 23:40:22

@haltabush - 不，我没有任何框架:-( – Nate 2012-03-25 23:44:47

试试这个：

var s1=document.getElementById('stateSelect'); 
var s2=document.getElementById('stateSelect2'); 
s1.onchange=function(){ 
    s2.value=s1.value; 
}

演示：http://jsfiddle.net/rLEvD/

来源

2012-03-25 23:42:45 stewe

Stewe - 谢谢，这看起来很有前途，但我恐怕我不太明白，我需要它稍微有点不同。有什么办法可以使第二个选择框的值在任何旧函数内部改变，而不是你所做的特殊的一个？ – Nate 2012-03-25 23:48:55

是的，只需在函数中使用's2.value = s1.value;' – stewe 2012-03-25 23:51:38

不是特别的跨浏览器，取决于具有相同值属性的选项，它可能更适合使用's2.selectedIndex = s1.selectedIndex'，在这种情况下给出相同的结果。 – RobG 2012-03-26 00:31:39

（其中#sel1是您的第一选择的ID，#sel2是你的第二个选择和#checkbox id为您的复选框的ID :)

$('#checkbox').click(function(){ 
    if ($('#sel2').attr('disabled') != 'disabled') { 
     $('#sel2').attr('disabled', 'disabled'); 
     $('#sel2').val($('#sel1').val());}  
    else 
     $('#sel2').removeAttr('disabled'); 
}); 
    $('#sel1').change(function(){ 
    if ($('#sel2').attr('disabled') == 'disabled') 
     $('#sel2').val($(this).val()); 
});

见http://jsfiddle.net/u4n7n/

来源

2012-03-25 23:53:24 Aaron

糟糕，在我发布之前没有看到你没有使用框架。我想这就是我得到的假设...... – Aaron 2012-03-25 23:57:45

如何设置一个等于另一个的选择框？

回答

相关问题