J'ai une liste déroulante asp.net et un bouton html. En cliquant sur le bouton (ici nommé comme clone), je suis censé générer une liste déroulante basée sur le scénario suivant.

  • Je commence avec seulement 1 liste déroulante (qui a 5 options) => 1,2,3,4,5 -> les premières options sont sélectionnées par défaut.J'appuie sur le bouton de clonage.
  • Je sélectionne l'option 5 (dans la liste de sélection n ° 2, c'est-à-dire la liste déroulante générée après le premier clic sur le bouton.)
  • Je clone à nouveau -> une nouvelle liste (# 3) est ajoutée avec SEULEMENT les options 2,3,4
  • je sélectionne l'option 2 (dans la liste de sélection n ° 3)
  • J'ai frappé clone -> une nouvelle liste (# 4) est créée avec les options 3,4
  • ..etc.

Je souhaite désactiver toutes les instances précédentes des listes déroulantes (ddlCityName) une fois que j'atteins la dernière liste déroulante.

Par exemple:

  • Une fois que je suis sur la liste déroulante n ° 2, j'ai besoin de la liste déroulante n ° 1 désactivée
  • Pour la liste déroulante n ° 3, j'ai besoin de la liste déroulante n ° 1 et de la liste déroulante n ° 2 désactivées
  • etc....

Voici le code existant pour créer dynamiquement une liste déroulante:

<body>
<form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>Category:</td>
                <td>
                    <asp:DropDownList ID="ddlCityName" runat="server" DataTextField="City" DataValueField="City" class="ddlClone"></asp:DropDownList>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="button" id="btnClone" value="Add" />
                </td>
            </tr>
        </table>
    </div>
    <div id="target">
        <br />
        <br />
    </div>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $('#btnClone').click(function () {
        //$('#ddlCityName').append('<option selected="ddlClone" value="0">Select City</option>');
        var original = $('select.ddlClone:eq(0)');
        var allSelects = $('select.ddlClone');
        var clone = original.clone();

        $('option', clone).filter(function (i) {
            return allSelects.find('option:selected[value="' + $(this).val() + '"]').length;
        }).remove();
        $('#target').append($('<span>').text('Category: '));
        $('#target').append(clone).append('<br /><br /><br />');
    });
</script>

Veuillez partager vos idées!

0
Ninja 22 juil. 2015 à 23:37

2 réponses

Meilleure réponse

Ajoutez le code suivant à la fin de votre fonction de clic btnClone.

$('.ddlClone').attr('disabled', false);
$('.ddlClone:not(:last)').attr("disabled", true);
0
Bikal Bhattarai 22 juil. 2015 à 21:06
document.getElementById("ddlCityName").setAttribute("disabled", "true");
0
cbender 22 juil. 2015 à 20:51