如何禁用後續列表中的選定列表值？

我有一個表，其中一列有值的列表。列表在所有行中都是相同的。如何禁用後續列表中的選定列表值？

現在，當用戶選擇第一行的值時，我想對所有行禁用它，並且當用戶在第二行中選擇第二個值時，應該在所有即將到來的行中禁用該值等。因此，該用戶沒有選擇爲多個列選擇一個值的選項。

我可以禁用所有列的第一選擇的值，但不知道如何做到這一點的所有行。

數據庫表

sqlite> select * from outdoor_games; 
games 
---------- 
Badminton 
Football 
Basketball 
Golf

代碼

<?php 
$db = new PDO("sqlite:c:/sqlite/games.db"); 
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
$query_game = $db->prepare("select distinct games as di from outdoor_games;"); 
$query_game->execute(); 
$data = $query_game->fetchAll(); 
?> 
<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
</head> 
<body> 
<form action="<?php $_SERVER['PHP_SELF'];?>" method="post"> 
    <TABLE id="STable" width="350px" border="1"> 
      <tr> <th bgcolor="WHITESMOKE">Game Id </th> </tr> 
      <TR> <td><select name= "Game_id[]" class='Game'/> <option value="">Games</option> 
         <?php foreach ($data as $row){echo '<option value="' . $row['di'] . '">' . $row ['di'] . '</option>';} ?> 
        </select></td> 
      </TR> 
    </TABLE></br> 
    <label>No. of games <input type= "text" id="s_cnt" name= "d_Count"></label> 
    <button type="button" class='loadgames' >Load Games</button> 
    <input type="submit" name ="add_SP" value ="Add Student Info" style="float: right;" /> </br> </br> 
    <input type="submit" name ="exit" value ="EXIT" /> 
</form> 
<script> 

    $('.Game').on('click', function() 
    { 
     var selected = $(this).val(); 
     $('.Game').not(this).find('option[value="'+selected+'"]').prop('disabled', true); 

    }); 
    $(".loadgames").on('click',function() 
    { 
     var num = $("#s_cnt").val(); 
     $("#STable tr").slice(2).remove(); 
     for (var i = 2; i <= num; i++) 
     { 
       var data = "<tr><td><select name='Game_id[]' class='Game'><option value='null'>Games</option><?php foreach ($data as $row){echo "<option value=".$row['di'] . ">" .$row['di']. "</option>";}?></select></td></tr>"; 
       $("#STable").append(data); 
     } 
     }); 
    </script> 
    </body> 
    </html>

來源

2017-08-16 binee

試試這個：

$('select').on('change',function(){ 
var val = $(this).val(); 
var selected = $(this); 
$('select').nextAll('select').find('option').each(function(){ 
    if($(this).attr('value')==val) { 
    $(this).attr('disabled','disabled'); 
    } 
}) 
});

看到demo。

來源

2017-08-16 11:47:42

使用此代碼也禁用只有第一個選擇的選項。而我想禁用我選擇的每個選項。 – binee

你想要在前面的下拉列表中選擇的所有選項都禁用？ –

我已經更新了答案現在就來試試.. –

你可以試試這個

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
    $(document).on('change', '.Game', function() { 
     $('.Game option').removeClass("active"); 
     $(this).addClass("active"); 
    });  
    }); 
<script> 

// For class 
.Game option.active {opacity: 0.3;cursor: pointer}

來源

2017-08-16 11:38:41

我是新來的節目所以不知道我們將如何添加類。 – binee

如何禁用後續列表中的選定列表值？

回答

相關問題