javascript - jQuery "chosen": conflict with 'selected' attribute in option tag -


i'm having trouble getting jquery snippet work due 'conflict' jquery plugin 'chosen'. i'm using wordpress in case matters.

i want set selected attribute in several <option> tags, using

jquery( document ).ready(function() { var arr = ["1", "2"]; jquery("#location option").each(function () {     if (jquery.inarray(jquery(this).val(), arr) != -1) {         jquery(this).prop('selected', true);     }; }); }); 

html output

 <select name="location[]" multiple="multiple" id="location" class="postform" style="display: none;">         <option value="-1">select location</option>         <option class="level-0" value="1">location a</option>         <option class="level-0" value="2">location b</option>         <option class="level-0" value="3">location c</option>     </select> 

i feel i'm providing little details here solve issue, i'm unsure additional code post here.

when disabling (not enqueueing) chosen plugin (chosen.jquery.min.js), works fine. still, chosen plugin work.

your code does work, although it's order in call in - may stumbling on little. demostrated in fiddle.

functions.php

<?php      /**      *  load:      *    css; chosen; jquery.     **/     function wordpress_scripts() {          wp_enqueue_style(                     'chosen.css',                     get_stylesheet_uri()                   );          wp_enqueue_script(                     'chosen.js',                     get_template_directory_uri() . '/js/chosen.js',                     array('jquery')                  );          wp_enqueue_script(                     'myscript.js',                     get_template_directory_uri() . '/js/myscript.js',                     array('jquery')                  );     }      add_action( 'wp_enqueue_scripts', 'wordpress_scripts' ); ?> 

myscript.js

<script>     jquery(document).ready(function(){          var arr = ["1", "2"];          jquery("#location option").each(function () {              if (jquery.inarray(jquery(this).val(), arr) != -1) {                  jquery(this).prop('selected', true);              };          });           if ( typeof jquery.fn.chosen !== 'undefined' )              jquery("#location").chosen();     }); </script> 

Comments

Popular posts from this blog

c++ - How to add Crypto++ library to Qt project -

jQuery Mobile app not scrolling in Firefox -

How to use vim as editor in Matlab GUI -