I have 2 select option in my html page.
I use JQuery for formatting one Select option using below code
$('select').wSelect();
but due to this , other select option also getting affected with the same formatting.
I don't want JQuery to be applied on the second Select Option.
Could you please let me know how to do this ?
Give ID's to your selects!
<select id="sel1">
Then jQuery
$("#sel1").wSelect();
Give your select you want to apply the formatting a class name, and then
$('select.wSelect').wSelect();
and in html:
<select class="wSelect">
...
</select>
So now, moving forward apply the class wSelect to all the select nodes which you want to apply the specific formatting to.
Try this
Specify a unique attribute like id to the select as below
<select id="sel">
and your code
$('select#sel ').wSelect();
Related
I add a task, then click edit, the priority dropdown menu isn't render. I wonder what's is wrong. Take a look my full code here
http://jsfiddle.net/U3pVM/3801/
it appear to be {{task.priorty}}, not rending with ng-model?
Try this in the second drop-down
<select ng-show="editable" ng-model="task.priorty" ng-options="priority.level as priority.level for priority in priority">
</select>
Fiddle
You needed to add the model of the selected task to the edit drop-down list. Also, you had to specify that the value of each item in the edit drop-down is the level property.
In the first drop-down, you are selecting the entire priority object as the value of each drop-down. However, you only assigned the priority.level to task (and not the entire priority object). Hence, in the edit drop-down, the priority.level as... specifies that you are trying to match the level property alone with your model.
You forgot to add ng-Model to your second select (without ngModel your select control won't work).
Example:
<select ng-show="editable" ng-model="selected_priority2" ng-options="priority.level for priority in priority">
<option value="">{{tasks.priorty}}</option>
</select>
Updated your jsFiddle
Hello I am new with jQuery stuff so I need your support.
I am using Bootstrap Select script and I want to remove Price, when user select to drop-down.
If user select values Price, will be removed else add Price,
My Sample JSFiddle
you can use the title option like so: $(".sort_low_to_high").selectpicker({title:'Price'});
Demo: JS Fiddle
You are giving multiple attribute in <select> tag. This will make the selection as multiple, but sorting will either be high to low or low to high. So you should remove multiple attribute.
My Fiddle : http://jsfiddle.net/pvT8Q/53/
You have not given id's to give id and in your code.
after that you can remove it by $("#id").remove();
This will play nicely with the Bootstrap markup: http://jsfiddle.net/pvT8Q/54/
$('.bootstrap-select').on('click', function() {
$('.selectpicker').find('li').first().hide();
});
I am trying to select a certain value in my dropdown via jquery..I tried this..
$("#membershiptype").val(1).selected;
it doesnt work..I am clearly over my head here as I am inexperience in jquery.
To select an option by index, you can do this :
$("#membershiptype").get(0).selectedIndex=1;
Demonstration
To select an option by value (the content of the option), you may use this :
$("#membershiptype").val('B');
Demonstration
You can assign the val() to the option value you want to be selected.
$('#membershiptype').val(valueToBeSelected);
Been trying to work this out for a little while now, no luck.
jQuery("#choosenCause option:selected").removeAttr("selected","selected");
jQuery('#choosenCause option[value="'+json.causeID+'"]').attr("selected",true);
I'm using the above, it adds selected="selected" to the right element, but does not change the selected element that the user sees.
Full JS here - http://inspire.simplyfundraising.co.uk/wp-content/themes/inspire/assets/js/promojs.js
To set the selected option of a select element, use val():
jQuery('#choosenCause').val(json.causeID);
in the first string you need to correct the code - jQuery("#choosenCause option:selected").removeAttr("selected");
the second string works fine as i see
I have one select box with options and I am using jQuery "Chosen" on a Zend View. This plugin is working fine.
Javascript:
$('#select_type').chosen();
My problem is I need to select one of the options when the page loads depending on what the value of type_id is. I tried this:
document.getElementById('select_type').value = '<?=$this->type_id?>';
This changes its value but the option is not selected in the JQuery chosen.
Any ideas?
EDIT: The option successfully changes by doing what I have mentioned above but it does not update/change the selected element in jQuery "chosen" plugin. My question is about updating the selected value for jQuery Chosen not the HTML SELECT (which I have done successfully). Here is a link to jQuery Chosen plugin
Update list with JS
After you run:
document.getElementById('select_type').value = '<?=$this->type_id?>';
For Chosen version 1 and above (newer)
You should call:
$('#select_type').trigger('chosen:updated');
Taken from the Chosen documentation:
Updating Chosen Dynamically
If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "chosen:updated" event on the field. Chosen will re-build itself based on the updated content.
$("#form_field").trigger("chosen:updated");
See the change log for the announcement of this API change.
For Chosen versions below 1 (older)
You should call:
$('#select_type').trigger('liszt:updated');
Taken from the Chosen documentation:
Updating Chosen Dynamically
If you need to update the options in your select field and want Chosen
to pick up the changes, you'll need to trigger the "liszt:updated"
event on the field. Chosen will re-build itself based on the updated
content.
jQuery Version: $("#form_field").trigger("liszt:updated");
Prototype Version: Event.fire($("form_field"), "liszt:updated");
Set the value before calling Chosen
Instead of doing this from JS why don't you just set the selected option in the HTML before calling the Chosen plugin with JavaScript? You are setting the value from a piece of PHP so I don't see why this couldn't be done.
You can just set the correct elements with the attribute selected like so:
<select name="teams[]" data-placeholder="Chose an option:"
class="chzn-select" multiple tabindex="6">
<option value=""></option>
<option selected="selected">Dallas Cowboys</option>
<option selected="selected">New York Giants</option>
<option>Philadelphia Eagles</option>
<option>Washington Redskins</option>
</select>
Chosen will take care to initialize itself and show the two pre-selected choices.
Try this:
$("#select_type").val(<?=$this->type_id?>).trigger('change');
$('#select_type').trigger('liszt:updated');
Try this:
$('#select_type').val('<?=$this->type_id;?>'); // Select the value before .chosen();
$('#select_type').chosen();
$('#select_type').val('<?=$this->type_id?>');
try it
Try the following:
$("#choen-presentacion").val(value.id_presentacion).trigger('chosen:updated')