Question

我有两个具有不同值的选择框。我希望能够在任一框中选择一个选项并更改另一个框中的值以使它们对应。例如，如果我从'#numberofpeople'选项中选择'2 people'，我希望'#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

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

2 个答案: