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')
Related
I need help with the following scenario:
I use a single-select dropdowns in a table. Each row has its own dropdown.
Now there are 2 options for changing the selection:
Click on deselect ('x') icon (works ok - via ng-change).
Open the dropdown, choose another value from list. Override the previous value (although ng-change fires, I have no way to know if it's a new value or a overriding value).
I wish to disable the second behavior. Is it possible to 'tell' chosen that once a value was selected, the only way to re-select a new value is to click on 'x'?
e.g: once a value was selected, disable the dropdown, hide the 'arrow' icon, but keep the 'x' deselect icon active?
<select chosen
allow-single-deselect="true"
placeholder-text-single="'Select'
ng-model="row.userSelection"
ng-options="field as field.name for field in vm.fields">
<option value=""></option>
</select>
Thanks.
Add an ng-disabled="$ctrl.model" will disable the select until the "x" clears the $ctrl.model. Once cleared the select will be Reenabled and a new selection can be made.
The only thing I can think of after taking a quick look, is to convert from ng-options to and use ng-disabled on the actual option element. The documentation says that you can hide disabled options, so if for example you were to select OPTION1 and OPTION[2-4] were disabled, they would be removed from the list.
I found a plunker with version 1.0 but it doesn't work. Making options distabled still shows them in the list, although it makes them undefined when you select them. Maybe a newer version is updated to actually remove them.
For some prototyping reasons I am tweaking the select2 plugin, particularly the multiple selection. I need to do two things:
<option value="VAL123">This is value 123</option> The options dropdown should show option's text This is the value 123 (default behaviour), but when selected, the "select2-search-choice" should display the selected value VAL123, not the text.
If the selection is greater than 1, I need to show a custom message text, like Multiple options selected, not the options themselves. Ideally, the selection would also avoid deleting the selected option(s) from the dropdown.
I know it seems like breaking the logic of the plugin and is probably not doable with the provided API. Any hardcore Select2 experts here to help me tweak the source code on any of these issues?
Thanks!
UPDATE: The selected options are not deleted from the list, they are just marked with the ".select2-selected" class, which can be edited in select2.css to show them anyway.
You can just use the plug in as is and use the formatSelection option and give a function such as
formatSelection: function(item) {
return item.id
}
here's a fiddle forked from someone's multiselect select2 fiddle
http://jsfiddle.net/ba98G/
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
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);
I have a JSP page which contains an HTML <select> populated with all countries loaded from a database. Say for example, on "create user" all the country values are loaded in the select menu and I select 5 countries. Those 5 values are loaded into database for that particular user.
Now when I click on "modify user" for that userid again there will be a select menu and all the countries will be loaded in the select menu but those 5 countries should be highlighted/selected.
How do I accomplish this using javascript?
I am not sure if I understand the question correctly, but here is a multiple selection list:
<select multiple="multiple">
<option value ="UK">UK</option>
<option value ="France" selected="selected">France</option>
<option value ="Germany">Germany</option>
<option value ="Italy" selected="selected">Italy</option>
</select>
As I understand it, no javascript is required. If you want to use AJAX to update the list dynamically, then you need to add the selected attribute to the items that need to be highlighted. You can easily do that with a javascript library.
javascript may not be the best answer, although it is certainly doable that way.
In the JSP page, I'm assuming you have a loop that populates the HTML <select> options. In that loop, place a test to see if the current value was selected for the user. If so, add a selected="selected" attribute/value pair to the <option> for that country.
If you really want to do this in javascript, the same logic applies: loop through the option elements for the select, and set selected to true for the appropriate elements.
As an alternative, you can have your JSP generate the appropriate javascript lines to set only those options that are selected, saving a loop through all countries on page load.
Have the javascript function invoked through the page load event so that the selections are made when the page is displayed.