ホーム>source

私は2つの select を持っています  ボックス。 selectbox1 でオプションを選択すると 、 selectbox2 の対応する値を自動的に変更します  値に関係なく、順序。

問題は、コードは数回試行するまで正常に動作しているということです。その後、 selectbox1 のオプションを変更しても 、それは selectbox2 のものを更新しません 。

問題を再現するには;AからEに進み、繰り返します。

コード:

$(".firstSelectBox").change(function(e) {
  var selectedOption = $("option:selected", this);
  var idx = $(this).children().index(selectedOption)
  var secChildIdx = $(".secondSelectBox").children()[idx];
  $(".secondSelectBox").find(":selected").removeAttr('selected');
  $(secChildIdx).attr("selected", "selected");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
  <div class="controls">
    <label>First Selectbox</label><br/>
    <select class="firstSelectBox validate[required]">
      <option value="1">Select A</option>
      <option value="2">Select B</option>
      <option value="3">Select C</option>
      <option value="4">Select D</option>
      <option value="5">Select E</option>
    </select>
  </div>
</div>
<br />
<div class="control-group">
  <div class="controls">
    <label>Second Selectbox</label><br />
    <select class="secondSelectBox validate[required]">
      <option value="A">Select 1</option>
      <option value="B">Select 2</option>
      <option value="C">Select 3</option>
      <option value="D">Select 4</option>
      <option value="E">Select 5</option>
    </select>
  </div>
</div>

また、JSFiddleバージョン:https://jsfiddle.net/153w074d/

あなたの答え
  • 解決した方法 # 1

    すべてのコードは必要ありません。 selectedIndex で作業するだけです :

    $(".firstSelectBox").change(function(e) {
      var selectedIndex = $(this).get(0).selectedIndex;
      $(".secondSelectBox").get(0).selectedIndex = selectedIndex;
    });
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <div class="control-group">
      <div class="controls">
        <label>First Selectbox</label><br/>
        <select class="firstSelectBox validate[required]">
          <option value="1">Select A</option>
          <option value="2">Select B</option>
          <option value="3">Select C</option>
          <option value="4">Select D</option>
          <option value="5">Select E</option>
        </select>
      </div>
    </div>
    <br />
    <div class="control-group">
      <div class="controls">
        <label>Second Selectbox</label><br />
        <select class="secondSelectBox validate[required]">
          <option value="A">Select 1</option>
          <option value="B">Select 2</option>
          <option value="C">Select 3</option>
          <option value="D">Select 4</option>
          <option value="E">Select 5</option>
        </select>
      </div>
    </div>
    
    

    元のコードで起こったことは、何らかの方法で、 selected  属性が台無しにされています。これを試してください:各オプションをAからEに変更してから、Aからやり直すと、選択が機能しなくなります。次に、2番目の select を調べます  複数の option があることを確認する   selected="selected" と  属性。何がそのカントーを引き起こしたのかわからない。

  • 解決した方法 # 2

    @DontVoteMeDownの答えは確かに機能しますが、この問題を抱えている理由は、 .prop 間の矛盾のためです  および .attr 。どちらも似ていますが、同じ基本的な同じ値を参照しません。

    以下の2行を変更して .prop を使用する場合   .attr の代わりの値 、コードは機能します。以下の実際のコード例を参照してください。

    $(".secondSelectBox").find(":selected").removeAttr('selected'); // change to .removeProp
      $(secChildIdx).attr("selected", "selected"); // change to .prop
    
    

    $(".firstSelectBox").change(function(e) {
      var selectedOption = $("option:selected", this);
      var idx = $(this).children().index(selectedOption)
      var secChildIdx = $(".secondSelectBox").children()[idx];
      $(".secondSelectBox").find(":selected").removeProp('selected');
      $(secChildIdx).prop("selected", "selected");
    });
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <div class="control-group">
      <div class="controls">
        <label>First Selectbox</label><br/>
        <select class="firstSelectBox validate[required]">
          <option value="1">Select A</option>
          <option value="2">Select B</option>
          <option value="3">Select C</option>
          <option value="4">Select D</option>
          <option value="5">Select E</option>
        </select>
      </div>
    </div>
    <br />
    <div class="control-group">
      <div class="controls">
        <label>Second Selectbox</label><br />
        <select class="secondSelectBox validate[required]">
          <option value="A">Select 1</option>
          <option value="B">Select 2</option>
          <option value="C">Select 3</option>
          <option value="D">Select 4</option>
          <option value="E">Select 5</option>
        </select>
      </div>
    </div>
    
    

  • 解決した方法 # 3

    prop を使用することもできます  オプションを選択します。

    $(".firstSelectBox").change(function(e) {
      var selectedIndex = $(this).get(0).selectedIndex;
      $('.secondSelectBox option:eq('+selectedIndex+')').prop('selected', true); 
    });
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="control-group">
      <div class="controls">
        <label>First Selectbox</label><br/>
        <select class="firstSelectBox validate[required]">
          <option value="1">Select A</option>
          <option value="2">Select B</option>
          <option value="3">Select C</option>
          <option value="4">Select D</option>
          <option value="5">Select E</option>
        </select>
      </div>
    </div>
    <br />
    <div class="control-group">
      <div class="controls">
        <label>Second Selectbox</label><br />
        <select class="secondSelectBox validate[required]">
          <option value="A">Select 1</option>
          <option value="B">Select 2</option>
          <option value="C">Select 3</option>
          <option value="D">Select 4</option>
          <option value="E">Select 5</option>
        </select>
      </div>
    </div>
    
    

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ sorting - 概要画像からスタックDICOM画像を区別する方法は?