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
Post a Comment