1
votes

Comment obtenir l'attribut de données de l'option en sélection multiple?

Comment puis-je obtenir la liste des valeurs sélectionnées à partir de plusieurs sélections? Je ne peux obtenir que la valeur ( J'ai besoin d'obtenir les valeurs attr ('data-name')

https://playcode.io/301780?tabs=console&index.html&output

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="payment" style="width: 246px;" required multiple="multiple" class="select2" id="id_payment">
  <option value="3" data-name="blago">blago</option>
  <option value="4" data-name="usd" selected>usd</option>
  <option value="5" data-name="uah" selected>uah</option>
  <option value="2" data-name="btc">btc</option>
</select>

<script>
  $(document).ready(function() {
    var vals = $('#id_payment').val()
    var paymentList = []

    if (vals) {
      for (var i = 0; i < vals.length; i++) {
        console.log(vals[i])
        paymentList.push($(vals[i]).selector)
      }
    }
  })
</script>

javascript jquery

1 commentaires

pourquoi ne pas simplement définir le nom comme valeur?

4 Réponses :

0
votes

Utilisez each pour parcourir les éléments et les rassembler dans un tableau, comme:

var dataNames = [];
$("#id_payment > option[selected]").each(function() {
    dataNames.push($(this).data("name"));
});

0 commentaires

0
votes

Vous pouvez utiliser ce code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="payment" style="width: 246px;" required multiple="multiple" class="select2" id="id_payment">
        <option value="3" data-name="blago">blago</option>
        <option value="4" data-name="usd" selected>usd</option>
        <option value="5" data-name="uah" selected>uah</option>
        <option value="2" data-name="btc">btc</option>
</select>

$(document).ready(function () {
var vals = $('#id_payment').val()
var paymentList = []
var nameselected = []

if (vals) {
    for (var i = 0; i < vals.length; i++) {
        console.log(vals[i])
        paymentList.push($(vals[i]).selector)
    }
  }
  
   $("#id_payment option:selected").each(function(index, item){
         
         let name = $(item).data('name');
         //alert(name)
         nameselected.push(name);
         console.log(name);
   })
})

$("#id_payment option:selected").each(function(index, item){

         let name = $(item).data('name');
         //alert(name)
         nameselected.push(name);
         console.log(name);
   })

0 commentaires

1
votes

Vous pouvez utiliser map pour parcourir les options sélectionnées et utiliser data pour obtenir les valeurs de data-name .

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="payment" style="width: 246px;" required multiple="multiple" class="select2" id="id_payment">
  <option value="3" data-name="blago">blago</option>
  <option value="4" data-name="usd" selected>usd</option>
  <option value="5" data-name="uah" selected>uah</option>
  <option value="2" data-name="btc">btc</option>
</select>

var result = $("#id_payment option:selected").map(function() {
  return $(this).data("name");
}).get();

console.log(result);

0 commentaires

0
votes

Vous devez utiliser la fonction jquery .each () .

Exemple:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="payment" style="width: 246px;" required multiple="multiple" class="select2" id="id_payment">
  <option value="3" data-name="blago">blago</option>
  <option value="4" data-name="usd" selected>usd</option>
  <option value="5" data-name="uah" selected>uah</option>
  <option value="2" data-name="btc">btc</option>
</select>

<script>
  $(document).ready(function() {
    $('#id_payment :selected').each(function() {
      console.log($(this).data("name"))
    })
    $("#id_payment").click(function(){
      $('#id_payment :selected').each(function() {
        console.log($(this).data("name"))
      })
    })
  })
</script>

Il est configuré de sorte que lorsque vous effectuez plus de sélections, il enregistre toujours tous les éléments sélectionnés

0 commentaires