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.
Related
the Shopify collection buy button creates products that have pull-down menus for choosing options like color. when you change a color, the product image changes.
example collection page
i want to trigger those product image changes with javascript. relevant html looks like this:
<div class="shopify-buy__option-select-wrapper" data-element="option.wrapper">
<select id="Option-999-0" class="shopify-buy__option-select__select" name="Color" data-element="option.select">
<option selected="" value="Silver">Silver</option>
<option value="Gold">Gold</option>
<option value="Rainbow">Rainbow</option>
<option value="Blue">Blue</option>
</select>
</div>
some things i have tried:
// get the <select> element (this part works)
let selectElement = document.getElementById('Option-999-0')
//select a new value
selectElement.value = 'Blue'
let changeEvent = new Event('change');
selectElement.dispatchEvent(changeEvent)
I've also tried click() -ing on various things like:
selectElement.options[3].click()
but the javascript from shopify never seems to "hear" my actions unless i literally click my mouse on the select menu. thats the only way i can get the image to change. what am i doing wrong?
this is the javascript from shopify: https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js ...i searched it for "isTrusted" and no results fwiw.
i have tried creating the buy button with and without the iframe. i seem to be able to select the elements just fine either way (using contentDocument property of iframe), but my javascript never triggers the image change response from the shopify code, and i cant figure out what action shopify is actually listening for?
what i am trying to achieve is to replace the pulldowns with regular text in little boxes that you can click on to change the image. if this can be done through the shopify buy button options that would be fine also.
any clues appreciated!
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.
I'm working in an angularjs app, and I having a hard time trying to set the selected value in a select tag.
Notice, the 2nd option has the selected="selected"
I tried all the solutions posted, like set the doc type t html5, add autocomplete=off, add a name to the form tag. And nothing seems to work. Any idea how to achieve that.
This is fiddle: https://jsfiddle.net/20cw7eqe/ and works fine there.
But it does not work on FF or Chrome. BTW, Im using bootstrap.
Any workaround?
Take a look at this example: http://plnkr.co/edit/Xc8Qrcr0AN4I2U0chbye?p=preview
There you can see 2 different examples of select tag, for different models. You can use the one that is more similar to your case.
Just set in your controller the value you want to be selected. ng-model will make the rest.
I have edited the plunker so you can se how ng-selected works. This was the code included:
<select required="true" ng-model="selected3">
<option ng-repeat="option in options2" ng-selected="option == 'second'" >{{option}}</option>
</select>
I got some select tag as follows:
<select id="fruits">
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Orange</option>
<option value="4">Grapes</option>
<option value="5">Ginger</option>
</select>
What I want to do is, whenever the user focus on the select, and he's clicking on the key "G" in his keyboard, the option "Grapes" will be automatically selected, and when he presses "G" once again, "Ginger" will be selected and so on.
I have no clue how to do it.
Well, If you want to add Auto Complete functionality to your html select element then there is nothing better than selectize.js
All you need to do is either include its css and js file in your project or you can use cdns.
Go to Selectize website here
I think this is the default action of drop down(select control). You have to do zero effort to achieve it.
try this JSbin.. there is a select box and when user first presses g on the keyboard grapes is selected and on second ginger is selected
http://jsbin.com/UYeZaPA/1/edit
DEMO
What you are asking for is the default functionality of drop-down-list.
if you want to search the drop-down-list you can try this plugin.
jQuery Searchable DropDown Plugin Demo
DEMO - with your code
$('#fruits').searchable();
you can also try DEMO
I have a (hidden) html select object in my menu attached to a menu button link, so that clicking the link shows the list so you can pick from it.
When you click the button, it calls some javascript to show the <select>. Clicking away from the <select> hides the list. What I really want is to make the <select> appear fully expanded, as if you had clicked on the "down" arrow, but I can't get this working. I've tried lots of different approaches, but can't make any headway. What I'm doing currently is this:
<li>
<img src="/images/icons/add.png"/>Add favourite
<select id="list" style="display:none; onblur="javascript:cancellist()">
</select>
</li>
// in code
function showlist() {
//using prototype not jQuery
$('list').show(); // shows the select list
$('list').focus(); // sets focus so that when you click away it calles onblur()
}
I've tried calling $('list').click().
I've tried setting onfocus="this.click()"
But in both cases I'm getting
Uncaught TypeError: Object # has no method 'click'
which is peculiar as link text says that it supports the standard functions.
I've tried setting the .size = .length which works, but doesn't have the same appearance (as when you click to open the element, it floats over the rest of the page.)
Does anyone have any suggestions?
I've come across the same problem, wanted to implement keyboard navigation in my app, but select elements were not expanded, so people using the keyboard were going to lose functionality. I've created ExpandSelect() function which emulates mouse clicks on select elements, it does so by creating another <select> with multiple options visible at once by setting the size attribute, the code is hosted on Google Code website, ExpandSelect.js is only 4 KB, see screenshots and download it here:
http://code.google.com/p/expandselect/
Screenshots
There is a little difference in GUI when emulating click, but it does not really matter, see it for yourself:
When mouse clicking:
(source: googlecode.com)
When emulating click:
(source: googlecode.com)
More screenshots on project's website, link above.
Here a simple solution, AUTO-EXPANDED select menu (all options visible)
<select name="ddlTestSelect" id="ddlTestSelect" style="width:200px;position:absolute;">
<option selected="selected" value="0">defaulttt</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>
<script type="text/javascript">
var slctt=document.getElementById("ddlTestSelect");
slctt.size=slctt.options.length;if(slctt.options.length>1)slctt.style.width='470px';
</script>
You have a syntax error. It should be:
$('#list').click();
You forgot the #
Please try this:
function showlist() {
//using prototype not jQuery
$('#list').show(); // shows the select list
$('#list').focus(); // sets focus so that when you click away it calles onblur()
}
The simplest way is to use the "multiple" attribute in HTML
<select multiple></select>
and you could also add a style attribute to set the height of the list
<select multiple style="height:150px;"></select>