Dev Faq
0
votes

Pourquoi JS supprime-t-il des éléments de la liste déroulante originale?

J'ai 3 dérivations où les utilisateurs vont sélectionner leurs 3 meilleurs choix forment une liste prédéfinie. J'essaie de supprimer sélectivement le choix précédemment sélectionné de dans les déposées suivantes. Cette partie semble fonctionner, mais la liste déroulante des parents doit toujours avoir tous les choix disponibles.

Ce que je vois, c'est que tous les choix, à l'exception de l'option sélectionnée, sont également supprimés de la première sélection et je ne peux pas comprendre pourquoi. P>

Je suppose que cela a quelque chose à voir avec mon expérience limitée avec JS Globalement, et / ou en utilisant $ .Push à l'intérieur d'un $ .Chaque mais je ne peux pas comprendre pourquoi. P>

P> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li attr="Drop_down" attrtype="select" name="q1" id="q1" class="form-q label-left form-focused"><label class="cf-label" for="Field1"><span><span>Drop-down</span></span><span class="screen-reader-legend">field type drop-down</span></label>
    <div class="cf-field">
      <select id="Field1" name="Field1" aria-labelledby="Field1" class="form-item-field cf-medium" vo="e" aria-invalid="false" data-parsley-id="11">
        <option selected="True"></option>
        <option value="choice 1" title="choice 1">choice 1</option>
        <option value="choice 2" title="choice 2">choice 2</option>
        <option value="choice 3" title="choice 3">choice 3</option>
      </select>
    </div>
  </li>

  <li attr="Drop_down_1" attrtype="select" name="q2" id="q2" class="form-q label-left"><label class="cf-label" for="Field2"><span><span>Drop-down</span></span><span class="screen-reader-legend">field type drop-down</span></label>
    <div class="cf-field">
      <select id="Field2" name="Field2" aria-labelledby="Field2" class="form-item-field cf-medium" vo="e" aria-invalid="false">
        <option selected="True"></option>
        <option value="choice 1" title="choice 1">choice 1</option>
        <option value="choice 2" title="choice 2">choice 2</option>
        <option value="choice 3" title="choice 3">choice 3</option>
      </select>
    </div>
  </li>

  <li attr="Drop_down_2" attrtype="select" name="q3" id="q3" class="form-q label-left"><label class="cf-label" for="Field3"><span><span>Drop-down</span></span><span class="screen-reader-legend">field type drop-down</span></label>
    <div class="cf-field">
      <select id="Field3" name="Field3" aria-labelledby="Field3" class="form-item-field cf-medium" vo="e" aria-invalid="false">
        <option selected="True"></option>
        <option value="choice 1" title="choice 1">choice 1</option>
        <option value="choice 2" title="choice 2">choice 2</option>
        <option value="choice 3" title="choice 3">choice 3</option>
      </select>
    </div>
  </li>
</ul>

5 commentaires

Parce que vous êtes déplacement des éléments , pas Copier .

@Kevinb - Cela serait-il parce que je passe dans l'objet d'option dans mon tableau Options2?

Options2.Push (v); Cette ligne est votre raison. Vous les déplacez, ne copiant pas.

Cela fait partie du problème, bien que le déménagement réel se produit lorsque vous appelez .html

Ok, je vais lui donner un autre aller et refroidir cela en supprimant une partie de la complexité que @ APAD1 a suggéré. Merci

3 Réponses :

1
votes

Vous pouvez simplifier un peu votre code en ciblant chaque sélection individuellement.

p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
   <li attr="Drop_down" attrtype="select" name="q1" id="q1" class="form-q label-left form-focused">
      <label class="cf-label" for="Field1"><span><span>Drop-down</span></span><span class="screen-reader-legend">field type drop-down</span></label>
      <div class="cf-field">
         <select id="Field1" name="Field1" aria-labelledby="Field1" class="form-item-field cf-medium" vo="e" aria-invalid="false" data-parsley-id="11">
            <option selected disabled>Make a selection</option>
            <option value="choice 1" title="choice 1">choice 1</option>
            <option value="choice 2" title="choice 2">choice 2</option>
            <option value="choice 3" title="choice 3">choice 3</option>
         </select>
      </div>
   </li>
   <li attr="Drop_down_1" attrtype="select" name="q2" id="q2" class="form-q label-left">
      <label class="cf-label" for="Field2"><span><span>Drop-down</span></span><span class="screen-reader-legend">field type drop-down</span></label>
      <div class="cf-field">
         <select id="Field2" name="Field2" aria-labelledby="Field2" class="form-item-field cf-medium" vo="e" aria-invalid="false" disabled>
            <option value="default" selected disabled>Make a selection</option>
            <option value="choice 1" title="choice 1">choice 1</option>
            <option value="choice 2" title="choice 2">choice 2</option>
            <option value="choice 3" title="choice 3">choice 3</option>
         </select>
      </div>
   </li>
   <li attr="Drop_down_2" attrtype="select" name="q3" id="q3" class="form-q label-left">
      <label class="cf-label" for="Field3"><span><span>Drop-down</span></span><span class="screen-reader-legend">field type drop-down</span></label>
      <div class="cf-field">
         <select id="Field3" name="Field3" aria-labelledby="Field3" class="form-item-field cf-medium" vo="e" aria-invalid="false" disabled>
            <option value="default" selected disabled>Make a selection</option>
            <option value="choice 1" title="choice 1">choice 1</option>
            <option value="choice 2" title="choice 2">choice 2</option>
            <option value="choice 3" title="choice 3">choice 3</option>
         </select>
      </div>
   </li>
</ul>

5 commentaires

Merci, mais de tester votre suggestion, cela supprime également les options d'origine forment la première sélection lorsque vous effectuez la 3e sélection. Fondamentalement, les utilisateurs peuvent changer d'avis à un moment donné et nous devons commencer à partir de la première liste déroulante.

OK, donc fondamentalement, vous souhaitez que la première liste déroulante ait toujours 3 options, puis les déposées suivantes auront toujours les 2 options non sélectionnées dans la première liste déroulante?

Je l'ai mis à jour. Je suppose que vous voulez que l'utilisateur effectue sa sélection dans la première liste déroulante en premier, j'ai donc les deux autres personnes désactivées par défaut. Ensuite, lorsqu'une sélection est effectuée, les déposées de sélection ultérieures sont activées et l'option sélectionnée dans la première liste déroulante est masquée. Ensuite, si l'option dans la première modification de la liste déroulante, la nouvelle option sélectionnée est masquée des autres. Faites-moi savoir si c'est ce que vous aviez à l'esprit.

Pourquoi les valeurs précédentes doivent-elles être définies sur défaut? // Effacer les sélections précédentes

@REMI Parce que si l'utilisateur change d'avis et modifie leur sélection dans la première liste déroulante, cette option resterait sélectionnée dans l'une ou l'une des dépositions suivantes, malgré elle était cachée. Si vous commencez cela, puis sélectionnez "Choix 1" dans la première liste déroulante et "Choix 2" dans la deuxième liste déroulante, puis retournez et changez la première liste déroulante en "choix 2", vous verrez ce que je veux dire.

2
votes

Comme les commentaires ont dit, un problème que vous aviez était déplacer em> les éléments, plutôt que copier em>. J'ai utilisé JQuery's .cLone () CODE> pour effectuer une copie des éléments avant de les déplacer, nous pouvons donc conserver les options dans $ ('# # champ1') code>

J'ai également ajouté une fonction lié à l'autre Sélectionne $ ('Sélectionnez [id! = "field1"]') code> qui veillera à ce que le texte de l'espace réservé soit supprimé lorsque leur valeur est Mis à jour. P>

p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li attr="Drop_down" attrtype="select" name="q1" id="q1" class="form-q label-left form-focused"><label class="cf-label" for="Field1"><span><span>Drop-down</span></span><span class="screen-reader-legend">field type drop-down</span></label>
    <div class="cf-field">
      <select id="Field1" name="Field1" aria-labelledby="Field1" class="form-item-field cf-medium" vo="e" aria-invalid="false" data-parsley-id="11">
        <option selected="True"></option>
        <option value="choice 1" title="choice 1">choice 1</option>
        <option value="choice 2" title="choice 2">choice 2</option>
        <option value="choice 3" title="choice 3">choice 3</option>
      </select>
    </div>
  </li>

  <li attr="Drop_down_1" attrtype="select" name="q2" id="q2" class="form-q label-left"><label class="cf-label" for="Field2"><span><span>Drop-down</span></span><span class="screen-reader-legend">field type drop-down</span></label>
    <div class="cf-field">
      <select id="Field2" name="Field2" aria-labelledby="Field2" class="form-item-field cf-medium" vo="e" aria-invalid="false">
        <option selected="True"></option>
        <option value="choice 1" title="choice 1">choice 1</option>
        <option value="choice 2" title="choice 2">choice 2</option>
        <option value="choice 3" title="choice 3">choice 3</option>
      </select>
    </div>
  </li>

  <li attr="Drop_down_2" attrtype="select" name="q3" id="q3" class="form-q label-left"><label class="cf-label" for="Field3"><span><span>Drop-down</span></span><span class="screen-reader-legend">field type drop-down</span></label>
    <div class="cf-field">
      <select id="Field3" name="Field3" aria-labelledby="Field3" class="form-item-field cf-medium" vo="e" aria-invalid="false">
        <option selected="True"></option>
        <option value="choice 1" title="choice 1">choice 1</option>
        <option value="choice 2" title="choice 2">choice 2</option>
        <option value="choice 3" title="choice 3">choice 3</option>
      </select>
    </div>
  </li>
</ul>

2 commentaires

Merci. Cela ne semble pas fonctionner comme prévu. Sélectionnez N ° 1 Devrait toujours tous les choix disponibles afin que l'utilisateur puisse changer d'avis. Lorsque je teste votre solution, je ne suis toujours que laissé avec le choix sélectionné comme option unique de sélection de n ° 1.

Oui, après avoir posté ceci, j'ai vu le commentaire sur la réponse de Apad1 - Je fais actuellement des ajustements à cela. Désolé pour ça

1
votes

à partir d'une perspective UX, plutôt que de supprimer l'option du champ Sélectionner, vous pouvez également le rendre désactivé. De cette façon, l'utilisateur saura qu'il est toujours une option de la modifier.

De plus, vous n'auriez pas à muter tout le champ Sélectionner lors de la collecte des nouvelles options. Il suffit de désactiver l'option déjà choisie. Cela le rend évolutif puisque vous pouvez ajouter autant de champs sélectionnés que vous le souhaitez. P>

Le code suivant vous déplace tout simplement sur eux. Puis désactive l'option de laquelle est la même que l'option précédemment sélectionnée dans tous les champs Sélectionner. Cela vous permettra de choisir les champs au hasard, de sorte que vous ne devez donc pas nécessairement commencer au premier champ Sélectionner. P>

Vous pouvez maintenant également ajouter des options spécifiques à un champ Sélectionner qui n'est pas affecté. p>

p> 

<ul id="select-wrapper">
  <li attr="Drop_down" attrtype="select" name="q1" id="q1" class="form-q label-left form-focused"><label class="cf-label" for="Field1"><span><span>Drop-down</span></span><span class="screen-reader-legend">field type drop-down</span></label>
    <div class="cf-field">
      <select id="Field1" name="Field1" aria-labelledby="Field1" class="form-item-field cf-medium" vo="e" aria-invalid="false" data-parsley-id="11">
        <option selected="True"></option>
        <option value="choice 1" title="choice 1">choice 1</option>
        <option value="choice 2" title="choice 2">choice 2</option>
        <option value="choice 3" title="choice 3">choice 3</option>
      </select>
    </div>
  </li>

  <li attr="Drop_down_1" attrtype="select" name="q2" id="q2" class="form-q label-left"><label class="cf-label" for="Field2"><span><span>Drop-down</span></span><span class="screen-reader-legend">field type drop-down</span></label>
    <div class="cf-field">
      <select id="Field2" name="Field2" aria-labelledby="Field2" class="form-item-field cf-medium" vo="e" aria-invalid="false">
        <option selected="True"></option>
        <option value="choice 1" title="choice 1">choice 1</option>
        <option value="choice 2" title="choice 2">choice 2</option>
        <option value="choice 3" title="choice 3">choice 3</option>
      </select>
    </div>
  </li>

  <li attr="Drop_down_2" attrtype="select" name="q3" id="q3" class="form-q label-left"><label class="cf-label" for="Field3"><span><span>Drop-down</span></span><span class="screen-reader-legend">field type drop-down</span></label>
    <div class="cf-field">
      <select id="Field3" name="Field3" aria-labelledby="Field3" class="form-item-field cf-medium" vo="e" aria-invalid="false">
        <option selected="True"></option>
        <option value="choice 1" title="choice 1">choice 1</option>
        <option value="choice 2" title="choice 2">choice 2</option>
        <option value="choice 3" title="choice 3">choice 3</option>
      </select>
    </div>
  </li>
</ul>

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO