web-dev-qa-db-ja.com

jQueryまたは純粋なJSを使用して複数選択ボックスの値を取得する

以下に示すコードでは、jQueryまたは純粋なJavaScriptを使用して、関数val()の複数選択ボックスの値を取得する方法を教えてください。

<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;">
javascriptjqueryjquery-selectorsjquery-validatedom-events
42
Hulk

valから呼び出されたselect関数は、その倍数の場合に配列を返します。 $('select#my_multiselect').val()は、選択したオプションの値の配列を返します-ループして自分で取得する必要はありません。

108
prodigitalson

答えは次のように理解しやすいと思います。

$('#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

リストで「ニンジン」と「レーズン」を選択すると、出力は「1,3」になります。

25
Etdashou

このドキュメントは、selectと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)
11
aykut aydoğan

ウィジェットのページ によると、次のようになります。

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

わたしにはできる ：）

1
Yulian

これにより、 jQuery multiselect.js プラグインのselectedオプションの値とテキストが取得されました。

$("#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.. 
    }
});

「onChange」イベントに必要な場合に非常に便利です;）

1
notMyName

あなたもこのようにすることができます。

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

次に、次のPHP以下のコードから複数の選択を行います。選択された複数の値を適宜出力します。

$shift=$_POST['selectDuration'];

print_r($shift);
0
Dulith De Costa