jQuery mobile - dynamically switch Select Menu to Multiple

Question

I want to enable the multiple select when I checked the checkbox, but it doesn't work. How to achieve this using jQuery mobile?

<input type="checkbox" id="toggle"/>Toggle Select
<select name="targets" id="targets">
    <option value="0">-----Select an option ----</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
 </select>

$(document).ready(function() {
    $("#toggle").on('click', function() {
        if ($(this).is(':checked') == true){ 
            $("#targets").attr('multiple', true).attr("data-native-menu","false");
        } else {
            $("#targets").attr('multiple',false);
        }
    });
});

Hello. I edited your question. I have separated HTML and JS code snippets so that they have a proper syntax coloring. Also, I've fixed some code styling, indenting. If you have any questions - please, contact me. — Yeldar Kurmangaliyev, Jun 18 '15 at 04:28

score 0 · Answer 1 · answered Jun 18 '15 at 04:03

Try this

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
  </style>
</head>
<body>

  <input type="checkbox" id="toggle"> Toggle Select
   <select name="targets" id="targets">
         <option value="0">-----Select a option ----</option>
         <option value="1">option 1</option>
         <option value="2">option 2</option>
         <option value="3">option 3</option>
   </select>

  <script>
  $(document).ready(function(){

       $("#toggle").on('click',function(){
        if($(this).is(':checked')==true){ 
         $("#targets").attr('multiple',true).attr("data-native-menu","false");
        }else{
         $("#targets").attr('multiple',false);
        }
      });

  });
  </script>

</body>
</html>

It works in jquery ,but not workd in jqeury mobile, include the jquery mobile css file. — tao4yu, Jun 18 '15 at 05:30

Yeldar Kurmangaliyev · Answer 2 · 2015-06-18T04:37:47.123

0

You are using attr() function which is good for simple HTML attributes.
However, in the newer versions of jQuery (after 1.6), for element properties like readonly, checked, multiple you need to use jQuery prop() function.

Try changing the function:

$(document).ready(function() {
    $("#toggle").on('click', function() {
        if ($(this).is(':checked') == true){ 
            $("#targets").prop('multiple', true).attr("data-native-menu","false");
        } else {
            $("#targets").prop('multiple',false);
        }
    });
});

You can read more about jQuery.prop() here.

Here is my JS Fiddle Demo which works.

edited Jun 18 '15 at 04:37

answered Jun 18 '15 at 04:32

Yeldar Kurmangaliyev

33,467
12
59
101

I know it works well in jquery, but it not works in jquery mobile.Thanks .@Yeldar – tao4yu Jun 18 '15 at 05:18
Oh, I see. Try using `$('#targets').attr('multiple', 'multiple')`. Isn't it working as well? – Yeldar Kurmangaliyev Jun 18 '15 at 05:19

ezanker · Answer 3 · 2015-06-18T13:10:49.167

Start with data-native-menu="false" in the markup:

<label><input type="checkbox" id="toggle" />Toggle Select</label>
<select name="targets" id="targets" data-native-menu="false">
    <option value="0">-----Select an option ----</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

Then on the checkbox change event, destroy the selectmenu widget, update the multiple prop, and reinitialize it:

$("#toggle").on('change', function () {
    $("#targets").selectmenu("destroy").prop('multiple', $(this).is(':checked')).selectmenu();
});

DEMO

If you want the native menu for single select, change the code to:

$("#targets").selectmenu("destroy").prop('multiple', $(this).is(':checked')).selectmenu({  nativeMenu: !$(this).is(':checked')});

DEMO

jQuery mobile - dynamically switch Select Menu to Multiple

3 Answers3