jQuery mobile - dynamically switch Select Menu to Multiple

Question

jQuery mobile - dynamically switch Select Menu to Multiple

619 views Asked by tao4yu At 18 June 2015 at 03:41

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);
        }
    });
});

Original Q&A

There are 3 answers

**Ritesh Karwa** · Answer 1 · 2015-06-18 04:03:30

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>

**Yeldar Kurmangaliyev** · Answer 2 · 2015-06-18 04:32:45

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.

**ezanker** · Answer 3 · 2015-06-18 13:05:36

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

TechQA.

jQuery mobile - dynamically switch Select Menu to Multiple

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in JQUERY-MOBILE

Related Questions in JQUERY-MOBILE-SELECT

Popular Questions

Popular Tags

Trending Questions