0

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

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

2 回答 2

0

使用您当前的 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);

看到这个工作演示

于 2013-10-02T13:49:04.363 回答
0

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

这是解决方案：

<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>
于 2013-10-02T13:37:24.237 回答