使用另一个值不同的选择框更改选择框选项的值

Question

我有两个具有不同值的选择框。我希望能够在任一方框中选择一个选项并更改另一方中的值，以便它们相对应。例如，如果我从'#numberofpeople'选项中选择'2人'，我希望'#apartment'选择框显示'2 bed apartment'。反之亦然。这里是我的表单代码 -

<form> 
     <tr> 
     <td style="text-align: right"><label><span style="color:#CC0000;"> * </span>Number Of People :</label></td> 
     <td style="text-align: left"> 
      <span style="text-align: left"></span> 
      <div class="styledselectAlt"><select name="numberofpeople" id="numberofpeople"> 
      <option value="000" selected="selected"></option>    
      <option value="1 person" <?php if ($numberofpeople == 1) echo 'selected="selected"'; ?>>1</option> 
      <option value="2 people" <?php if ($numberofpeople == 2) echo 'selected="selected"'; ?>>2</option> 
      <option value="3 people" <?php if ($numberofpeople == 3) echo 'selected="selected"'; ?>>3</option> 
      <option value="4 people" <?php if ($numberofpeople == 4) echo 'selected="selected"'; ?>>4</option> 
      <option value="5 people" <?php if ($numberofpeople == 5) echo 'selected="selected"'; ?>>5</option> 
      <option value="6 people" <?php if ($numberofpeople == 6) echo 'selected="selected"'; ?>>6</option> 
      </select></div> 
     </td> 
     </tr> 

     <tr> 
     <td style="text-align: right; color: #7b7b7b;"><label for="apartment"><span style="color:#CC0000;"> * </span>Apartment Size :</label></td> 
     <td style="text-align: left"> 
      <span style="text-align: left"></span> 
      <div class="styledselect"><select name="apartment" id="apartment"> 
      <option value="1 Bed Apartment" <?php if ($apartment == "1 Bed Apartment") echo 'selected="selected"'; ?>>1 Bed Apartment</option> 
      <option value="2 Bed Apartment" <?php if ($apartment == "2 Bed Apartment") echo 'selected="selected"'; ?>>2 Bed Apartment</option> 
      <option value="3 Bed Apartment" <?php if ($apartment == "3 Bed Apartment") echo 'selected="selected"'; ?>>3 Bed Apartment</option> 
      <option value="4 Bed Apartment" <?php if ($apartment == "4 Bed Apartment") echo 'selected="selected"'; ?>>4 Bed Apartment</option> 
      <option value="3 Bed & 2 Bed Apartment" <?php if ($apartment == "3 Bed & 2 Bed Apartment") echo 'selected="selected"'; ?>>3 Bed & 2 Bed Apartment</option> 
      <option value="4 Bed & 2 Bed Apartment" <?php if ($apartment == "4 Bed & 2 Bed Apartment") echo 'selected="selected"'; ?>>4 Bed & 2 Bed Apartment</option> 
      </select></div> 
     </td> 
     </tr> 

</form> 

下面是JavaScript片段，我已经使用，没有工作，如果的选择框的相应值是相同的。我试图操纵代码，但无济于事。建议/解决方案将不胜感激。

<script type="text/javascript"> 

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

</script> 

Answer 1

你可以改变许多事情来解决。 最重要的错误是选择的值。你有不同的价值观，使他们不会永远是相同的

这里是解决方案：

<tr> 
     <td style="text-align: right"><label><span style="color:#CC0000;"> * </span>Number Of People :</label></td> 
     <td style="text-align: left"> 
      <span style="text-align: left"></span> 
      <div class="styledselectAlt"><select name="numberofpeople" id="numberofpeople"> 
        <option value="0" selected="selected"></option>    
        <option value="1" >1</option> 
        <option value="2" >2</option> 
        <option value="3" >3</option> 
        <option value="4" >4</option> 
        <option value="5" >5</option> 
        <option value="6" >6</option> 
       </select></div> 
     </td> 
    </tr> 

    <tr> 
     <td style="text-align: right; color: #7b7b7b;"><label for="apartment"><span style="color:#CC0000;"> * </span>Apartment Size :</label></td> 
     <td style="text-align: left"> 
      <span style="text-align: left"></span> 
      <div class="styledselect"><select name="apartment" id="apartment"> 
        <option value="1" >1 Bed Apartment</option> 
        <option value="2">2 Bed Apartment</option> 
        <option value="3" >3 Bed Apartment</option> 
        <option value="4" >4 Bed Apartment</option> 
        <option value="5">3 Bed & 2 Bed Apartment</option> 
        <option value="6">4 Bed & 2 Bed Apartment</option> 
       </select></div> 
     </td> 
    </tr> 

或者你可以改变的JavaScript，并与指数工作：

<script type="text/javascript"> 

    var s1 = document.getElementById('numberofpeople'); 
    var s2 = document.getElementById('apartment'); 
    s1.onchange = function() { 
     s2.selectedIndex = s1.selectedIndex 
    } 
    s2.onchange = function() { 
     s1.selectedIndex = s2.selectedIndex; 
    } 


</script> 

Answer 2

使用您的目前的HTML你可以这样做：

var fn = function (a) { 
    return function() { 
     var v1 = this.options[this.selectedIndex].value.split(' ')[0]; 
     for (var i = 0; i < a.options.length; i++) { 
      if (v1 === a[i].value.split(' ')[0]) { 
       a.selectedIndex = i; 
       break; 
      } 
     } 
    } 
} 

var s1 = document.getElementById('numberofpeople'); 
var s2 = document.getElementById('apartment'); 
s1.onchange = fn(s2); 
s2.onchange = fn(s1); 

See this working demo