0

値が異なる 2 つの選択ボックスがあります。どちらかのボックスでオプションを選択し、もう一方の値を変更して対応できるようにしたいと考えています。たとえば、「#人数」の選択肢から「2 人」を選択した場合、「#アパート」の選択ボックスに「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 に答える