前の選択に応じて、選択ボックスでオプションを非表示にします。 SQLから生成されるオプション

私は、ハイキングを行った人を私のユーザが選択できるようにしたいと思います。私はJScriptを使用して、ハイキングに参加した人の数に応じて、選択ボックスを追加することができます。この選択ボックス内の名前は、データベースクエリから生成されます。前の選択に応じて、選択ボックスでオプションを非表示にします。 SQLから生成されるオプション

異なる選択ボックスから同じ人物が複数選択されてしまうのを防ぐために、何かを配置したいと思います。たとえば、オプション1が最初のセクションボックスで選択されている場合は、2番目、3番目、4番目の選択ボックスでユーザーに使用可能にすべきではありません。

選択ボックスは、複数の選択ボックスが追加されることを可能にするために、次のコード

<TABLE id="buddyTable" class="form" border="1"> 
      <TR> 
       <td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td> 
       <TD><label>Buddy</label> 
       <select name="buddy[]"> 
        <option>Solo</option> 
       <?php 

      if ($result->num_rows > 0) { 
       // output data of each row 
       while($row = $result->fetch_assoc()) { 
       echo '<option value = "'.$row["idPerson"].'">'.$row["Forename"]. ' '.$row["Surname"].'</option>'; 
       //echo "name: " .$row["Forename"]. " " . $row["Surname"]. "<br>"; 
       } 
      } 
      else { 
       echo "0 results"; 
      }    
      $conn->close(); 
      ?> 
       </select> 
       </TD> 
      </TR> 
      </TABLE>

のJScriptを使用して生成され、ここで私はいくつかのために見ている

function addRowBuddy(tableID) { 
var table = document.getElementById(tableID); 
var rowCount = table.rows.length; 
if(rowCount < 10){       // limit the user from creating fields more than your limits 
    var row = table.insertRow(rowCount); 
    var colCount = table.rows[0].cells.length; 
    for(var i=0; i<colCount; i++) { 
     var newcell = row.insertCell(i); 
     newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
    } 
}else{ 
    alert("Maximum number of buddies is 10."); 

}

}

ありますソリューションは、彼らは良いですが、それらのどれもMySQL/PHPも関与しているときにこれを行う方法について私に知らせる。

ご意見、ご提案、またはご意見をお待ちしております。

出典

2016-05-28 David Jack

「

あなたはフレームワークを使用して気にしない場合、あなたはw2uiのenumフィールド（マルチセレクト）使用することができます

http://w2ui.com/web/docs/form/fields-enum

をフィールドのアイテムの配列はURLから直接引っ張ったりすることができますいずれかあらかじめ定義された配列にすることができます。

これは、1つのフィールドにすべての人物を選択できるように、選択ボックスをさらに作成する手間を省きます。

それともhttp://aehlke.github.io/tag-it/

出典

2016-05-28 14:25:15

私はこれを見るのが好きで、私のプロジェクトを本当にきれいにすることができます。提案していただきありがとうございます。私はこの代替案を検討している間も私の元の質問に基づいてアドバイスを受け付けます。 –

@デビッドを使用することができ、ここで私の解決策を見つけてください - [http://codepen.io/anon/pen/GqRWQe]

を注：この記事はjQueryの下にタグ付けされているので、私はjQueryの1.10を使用していました。

<html> 
    <body> 
     <TABLE id="buddyTable" class="form" border="1"> 
      <TR> 
       <td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td> 
       <TD><label>Buddy</label> 
        <select name="buddy[]" class="buddies"> 
         <option class="default">Select</option> 
         <option value="solo">Solo</option> 
         <option value="user1">user1</option> 
         <option value="user2">user2</option> 
         <option value="user3">user3</option> 
         <option value="user4">user4</option> 
        </select> 
       </TD> 
      </TR> 
     </TABLE> 
     <button type="button" onclick="addRowBuddy('buddyTable');">Add Buddy</button> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.js"></script> 
     <script> 
      var selectedPersons = [];  
      // add rows copied first row as reference 
      function addRowBuddy(tableID) { 
       var table = document.getElementById(tableID); 
       var rowCount = table.rows.length; 
       if(rowCount < 10){       // limit the user from creating fields more than your limits 
        var row = table.insertRow(rowCount); 
        var colCount = table.rows[0].cells.length; 
        for(var i=0; i<colCount; i++) { 
         var newcell = row.insertCell(i); 
         newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
        } 
       }else{ 
        alert("Maximum number of buddies is 10."); 
       } 
       $(row).find('.buddies').change(); 
      } 

      // disable other buddies from getting selected 
      function disableAlreadySelectedUsers(tableID) { 
       var otherOptions = 'option[value="'+selectedPersons.join('"],option[value="')+'"]'; 
       $('.buddies').each(function() { 
        var thisVal = $(this).val();   
        $(this).find('option').not(otherOptions).removeAttr('disabled'); 
        $(this).find(otherOptions).not('option[value="'+thisVal+'"]').attr('disabled', 'disabled'); 
       }); 
      } 

      // lets get all the buddies selected from all the select boxes available 
      function getSelectedValues() { 
       selectedPersons = []; 
       $('.buddies').each(function() { 
        if(($(this).val()).toLowerCase() != 'select') { 
         selectedPersons.push($(this).val()); 
        } 
       }); 
      } 

      // updates the selection on every select box change 
      $('#buddyTable').on('change', '.buddies', function() { 
       getSelectedValues(); 
       disableAlreadySelectedUsers('buddyTable'); 
      }); 
     </script> 
    </body> 
</html>

この解決策が役立つ場合は、この回答を受け入れてください。

出典

2016-05-28 16:37:56 dinesh

前の選択に応じて、選択ボックスでオプションを非表示にします。 SQLから生成されるオプション

答えて

関連する問題