web-dev-qa-db-fra.com

Obtient la valeur de multiselect box en utilisant jQuery ou JS pur

Dans le code ci-dessous, comment obtenir les valeurs de multiselect box dans la fonction val() à l'aide de jQuery ou de JavaScript pur?

<script>
    function val() {
        //Get values of mutliselect drop down box
    }

    $(document).ready(function () {
        var flag = 0;
        $('#emp').change(function () {
            var sub = $("OPTION:selected", this).val()
            if (flag == 1) $('#new_row').remove();
            $('#topics').val('');
            var html = '<tr id="new_row" class="new_row"><td>Topics:</td><td>  <select    id="topic_l" name="topic_l" class="topic_l" multiple="multiple">';
            var idarr = new Array();
            var valarr = new Array(); { %
                for top in dict.tops %
            }
            idarr.Push('{{top.is}}');
            valarr.Push('{{pic.ele}}'); { % endfor %
            }
            for (var i = 0; i < idarr.length; i++) {
                if (sub == idarr[i]) {
                    html += '<option value="' + idarr[i] + '" >' + valarr[i] + '</option>';
                }
            }
            html += '</select></p></td></tr>';
            $('#tops').append(html);
            flag = 1;
        });
    });
</script>
Emp:&nbsp;&nbsp;&nbsp;&nbsp;
<select id="emp" name="emp">
    <option value=""></option>
    <option value="1">1</option>
</select>

<div name="tops" id="tops"></div>

<input type="submit" value="Create Template" id="create" onclick="javascript:var ret=val();return ret;">

Merci d'avance!

javascriptjqueryjavascript-eventsjquery-selectorsjquery-validate
41
Hulk

la fonction val appelée à partir de la select renverra un tableau s'il s'agit d'un multiple. $('select#my_multiselect').val() renverra un tableau des valeurs pour les options sélectionnées - vous n'avez pas besoin de les parcourir et de les obtenir vous-même.

102
prodigitalson

Je pense que la réponse peut être plus facile à comprendre comme ceci:

$('#empid').on('change',function() {
  alert($(this).val());
  console.log($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select id="empid" name="empname" multiple="multiple">
  <option value="0">Potato</option>
  <option value="1">Carrot</option>
  <option value="2">Apple</option>
  <option value="3">Raisins</option>
  <option value="4">Peanut</option>
</select>
<br />
Hold CTRL / CMD for selecting multiple fields

Si vous sélectionnez "Carotte" et "Raisins" dans la liste, le résultat sera "1,3".

25
Etdashou

Ce document est comme un saint graal pour select et jquery . http://comp345.awardspace.com/select_element_cheatsheet.pdf

14
Aseem Gautam
var data=[];
var $el=$("#my-select");
$el.find('option:selected').each(function(){
    data.Push({value:$(this).val(),text:$(this).text()});
});
console.log(data)
10
aykut aydoğan

Selon la page du widget , cela devrait être:

var myDropDownListValues = $("#myDropDownList").multiselect("getChecked").map(function()
{
    return this.value;    
}).get();

Ça marche pour moi :)

1
Yulian

Cela m'a donné la valeur et le texte des options sélectionnées pour le jQuery multiselect.js plugin:

$("#selectBox").multiSelect({
    afterSelect: function(){
        var selections = [];
        $("#selectBox option:selected").each(function(){
            var optionValue = $(this).val();
            var optionText = $(this).text();
            console.log("optionText",optionText);                
            // collect all values
            selections.Push(optionValue);
        });

        // use array "selections" here.. 
    }
});

très utile si vous en avez besoin pour votre événement "onChange";)

1
notMyName

Vous pouvez faire comme ça aussi.

<form action="ResultsDulith.php" id="intermediate" name="inputMachine[]" multiple="multiple" method="post">
    <select id="selectDuration" name="selectDuration[]" multiple="multiple"> 
        <option value="1 WEEK" >Last 1 Week</option>
        <option value="2 WEEK" >Last 2 Week </option>
        <option value="3 WEEK" >Last 3 Week</option>
         <option value="4 WEEK" >Last 4 Week</option>
          <option value="5 WEEK" >Last 5 Week</option>
           <option value="6 WEEK" >Last 6 Week</option>
    </select>
     <input type="submit"/> 
</form>

Prenez ensuite la sélection multiple dans le code PHP ci-dessous. Il imprime les valeurs multiples sélectionnées en conséquence.

$shift=$_POST['selectDuration'];

print_r($shift);
0
Dulith De Costa