We Keep Coding

drop-down (select) text not refreshing on javascript update

I have a simple drop-down menu...
Select your favorite fruit:
<select name="fruit" id="fruit">
<option value="">--</option>
<option>Apple</option>
<option SELECTED>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
I have tried doing this...
document.getElementById("fruit").value = "";
...which changes the selection to the first option
I have also tried doing this...
document.getElementById("fruit").length=0;
...which deletes all the options.
I have also tried doing this...
document.getElementById("fruit").innerHTML="<option value=''>NEW</option>";
...which replaces the options with a new one.
All of those work as expected when not in my actual code. The problem is when I try and include it in a page inside my WordPress plugin.
What happens is... the value changes and is evident if I click on it after ...but... the display text in the drop-down stays as the original text "Orange" (even if that text doesn't actually exist in the drop-down anymore) until I actually change to a new selection.
I have tried searching for any relevant content that might affect it but I can't see anything. Between WordPress itself, the theme, the plugin, etc., there is just too much code to display here. I am simply hoping someone has seen the issue before and can point me in the right direction and let me know what to look for.

This is due to the fact your id='fruit_1' but you are using fruit which is the name and not the id of the select element.
Use document.getElementById("fruit_1") instead of document.getElementById("fruit"). That should work.

How to get the label to populate in Chosen dropdown?

Ok. So, after 2 hours of searching and debugging, I found out that chosen.js plugin won't populate the dropdown with the label/values from the original dropdown.
My original dropdown:
<select id="mySelectId">
<option label="test" value="test"></option>
</select>
If my dropdown is modified like this, it works fine:
<select id="mySelectId">
<option value="test">test</option>
</select>
How do I let chosen to see the labels instead?

Well I learned something new today. I never knew about the label attribute of <option>. However after reading about it here and here, I would suggest not using it.
It's not supported on a major browser (Firefox).
The same effect is achieved by placing the label between the opening and closing option tags<option>label</option> as you outlined above.
Modify your <option> tags accordingly, and then you will be able to get chosen.js to work properly.

ng-model gets defaulted correctly, but select won't show the text, shows blank instead

So, I'm trying to read a list of options from the server, and supply it to tag, with the first option as default - which is really important thing to do - but all I've got is the model is being set correctly, but in the select it shows blank!, and I have no idea why is that!
I've tried a lot of SO soulations, here, here, and here.
view:-
<select ng-options="option as option.Name for option in options track by option.ID" ng-model="selected">
controller:-
DataService.getOptionsFromServer().then(function (result) {
//console.log(result.data);
$scope.options = result.data;
$scope.selected = $scope.options[0];
console.log($scope.selected);
}, function (err) {
console.error(err);
});
the
console.log($scope.selected);
shows that the selected is being set correctly!
any help?
Update1: Seems the problems is compatibility between angular and jquery-mobile (not added by me :#), anybody knows something about that?
Update2: when removing jquery.mobile.min.js, it works fine. unfortunately, I need it throw out the project.
Update3: the problem is that JQM produce a span to display the value selected, and that's the problem!, I've binded the select, not the span.
the problem is that I can't bind the span till now, 'cuase JQM generate the span in the runtime :( , that's why when commenting out the JQM js it works fine.
Updated4: solved :D, solution given below for future reference.

the problem is that JQM doesn't display the selected value itself, instead it gets the selected value, and put into a span in run time, and then hides the select completely, trust me, it took me > 12 hours to learn it the hard way!
so in order for JQM to re-get the selected value from the select and send it to displaying span, you have to call:
jQuery("#SelectId").selectmenu("refresh", true);
notice that in case you're using angular like me, it's better to use "jQuery" not "$" to avoid conflict between angular and jQuery.
don't take that one line solation lightly :D, it cost more than a working day to get it :D, hope it would be helpful :D .
importent ref: here.
also note: you can make an angular directive if you intend to use the select more than once :D .

Maybe you are not getting any data from the server ,can you check that?

select2: swapping between text and value in multiple select2

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/

Chosen select an option by default with jQuery

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')