Wie können ausgewählte Listenwerte in nachfolgenden Listen deaktiviert werden?

Ich habe eine Tabelle mit einer Spalte, die die Liste der Werte hat. Die Liste ist in allen Zeilen gleich.Wie können ausgewählte Listenwerte in nachfolgenden Listen deaktiviert werden?

Wenn der Benutzer jetzt den Wert für die erste Zeile auswählt, möchte ich ihn für alle Zeilen deaktivieren, und wenn der Benutzer den zweiten Wert in der zweiten Zeile auswählt, sollte dieser Wert in allen folgenden Zeilen deaktiviert werden Sie haben nicht die Möglichkeit, einen Wert für mehr als eine Spalte auszuwählen.

Ich könnte den ersten ausgewählten Wert in allen Spalten deaktivieren, weiß aber nicht, wie es für alle Zeilen zu tun ist.

DB Tabelle

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

-Code

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

Quelle

2017-08-16 binee

try this:

$('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'); 
    } 
}) 
});

siehe demo.

Quelle

2017-08-16 11:47:42

Mit diesem Code wird auch nur die zuerst gewählte Option deaktiviert. Während ich jede Option deaktivieren möchte, die ich auswähle. – binee

Sie möchten alle Optionen deaktivieren, die in vorherigen Dropdown-Menüs ausgewählt wurden? –

Ich habe Updates die Antwort versuche jetzt .. –

Sie können versuchen, diese

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

Quelle

2017-08-16 11:38:41

Ich bin neu in der Programmierung, also nicht sicher, wie wir Klasse hinzufügen. – binee

Wie können ausgewählte Listenwerte in nachfolgenden Listen deaktiviert werden?

Antwort

Verwandte Themen