When I set the has-empty-data=true attribute for the select tag, an empty option will be added to the list option. so how can I set the text for this empty option tag?
<select name="address[province]" title="{{ 'customer.addresses.province' | t }}" has-empty-data="true" data-default="{{ form.province }}" id="provinceExist"></select>
I tried doing this but it still doesn't work
document.getElementsByName('provinceExist').options[0].innerHTML = "Water";
You need to used getElementById instead of getElementByName as your field have id called provinceExist:
Also, you need to add ContentLoaded event for change text or you need to create function to call on event happen. I have taken Content loaded event as an example.
window.addEventListener("DOMContentLoaded", () => {
document.getElementById("provinceExist").options[0].text = "Water";
});
Here example select box:
<select name="address[province]" id="provinceExist">
<option>Test</option>
<option>Test1</option>
<option>Test2</option>
</select>
You can try using the text property of the Option object:
document.getElementsByName('provinceExist').options[0] = new Option('Water', '');
You can also use the innerHTML property to set the text for the empty option tag, like this:
document.getElementsByName('provinceExist').options[0].innerHTML = 'Water';
getElementsByName returns a collection of elements, so you need to access the first element in the collection to be able to set the innerHTML or text property.
document.getElementsByName('address[province]').options[0].innerHTML = "Water";
instead of
document.getElementsByName('provinceExist').options[0].innerHTML = "Water";
or if you want to use the id you could use
document.getElementsById('provinceExist').options[0].innerHTML = "Water";
there's also another neatway instead of having to go through all this
<select>
<option hidden disabled selected value> -- select an option -- </option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
this will show up -- select an option -- and once you select something this option won't no longer exist and you won't be able to select it back/view it again
Related
I want my select to always show the same text, but "keep" the selected option value.
So e.g. my select always shows text "Language", but when I get the value of it in JS, it will return the value of selected option.
How do I achieve this? If there's no possibility for pure HTML + CSS, vanilla JS will do.
Edit: I want this because when i choose a value, I have a list of input boxes which get filled by this. They are then changeable; this select is only used to set the "base" of these inputs. I want this select to always show the same
text because I don't want to end up in a situation where select shows different text than actually the text in inputs that will be used.
Answer:
<select id="mySelect">
<option value="" hidden>Language</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
document.getElementById('mySelect').addEventListener('change', showSameValue)
function showSameValue() {
let select = document.getElementById('mySelect')
let firstOption = select.querySelector('option')
firstOption.value = select.value
select.selectedIndex = 0
}
Using the change event, you can capture the selected value then simply set the first option as selected and set its value to the selected value.
select = document.querySelector("select");
first = select.querySelector("option");
select.addEventListener("change",function(el){
first.value = el.target.value;
el.target.querySelector("option").setAttribute("selected",false)
el.target.selectedIndex = 0;
console.log(first.value);
});
<select>
<option value="">Language</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
This is a weird behavior but it can be done by
adding a hidden input element next to select
add the event listener to select (onchange) that would change the value of the hidden element and reset select to desired value 'Languages'
The key would be to have proper fields names, so when submitting the form select could be omitted and hidden would prevail.
You can store the selected value in a variable to meet your requirement and then use it wherever you need.
<select name="select" onchange="func(this.value);">
<option value="value1">Display always</option>
<option value="value2">Random Value</option>
</select>
And here's the Js function
var selected = "";
function func(selectedValue) {
document.getElementById( "select").selectedIndex = "0";
selected = selectedValue; // Use this after final selection
}
There are a few ways to achieve this, but using just a <select> would not be possible, I would not advise this on an accessibility UX principal.
One option would be to use a <span> or <div> that when clicked shows the options.
I'm trying to make a selection in the select box based on the URL. The urls are tied to the value attribute of option. How can I do this in jQuery?
<select>
<option value="http://name.com/">All</option>
<option value="http://name.com/category/electronics">Electronics</option>
<option value="http://name.com/category/books">Books</option>
<option value="http://name.com/category/furniture">Furniture</option>
<option value="http://name.com/category/kitchen">kitchen</option>
<option value="http://name.com/category/homeware">Homeware</option>
<option value="http://name.com/category/outdoors">Outdoors</option>
</select>
Maybe you want to bind the dropdown from the web URL. So you can add the id to your <select> tag like "drpCategory". Now you need to add below script for auto-selection of your dropdown.
$(function(){
$("#drpCategory").val(window.location.href);
});
At first, get the pathname from the URL you're currently in. You can do this with this function: window.location.pathname. Then in javascript code check if your pathname matches any of the options value and if it does then add selected attribute on that option.
If you just need to select an option on page load then the following should do it.
$(function(){
$( "select").val(window.location);
))
Put this code immediately after your <select> block:
<script>
$('select').last().val(location.href)
</script>
$('select').last() is jQuery's way to select the preceeding <select> element in the document. .val(value) is jQuery's way of changing the selection to the option with the specified value. By passing location.href to .val() you are telling it to select the option whose value contains the full URL of the current page.
I would like to update the select text with the selected option text after page load.
Im redirecting on click of a option and after page load getting url from browser and checking which option has that value and wants to replace that matched option's text inside select text.
<div class="sorting-option">
<select id="selectdropdown" class="dropdown-select">
<option value="">Recommended Items</option>
<option value="?sort1desc=F&sort1=Item_NAME">Name (A-Z)</option>
<option value="?sort1desc=T&sort1=Item_NAME">Name (Z-A)</option>
<option value=".f?sort1desc=F&sort1=Item_ONLINECUSTOMERPRICE">Price
(Low-High)
</option>
<option value=".f?sort1desc=T&sort1=Item_ONLINECUSTOMERPRICE">Price
(High Low)
</option>
</select>
</div>
This is what i have tried
$(document).ready( function() {
$('#selectdropdown').bind('change', function () {
location.href = $(this).val();
});
var brwsr_url=document.URL;
var subSting = brwsr_url.substring(brwsr_url.indexOf('?')); //here im getting substring of url to match with option value
$('#selectdropdown').find('option[value="subSting"]').text(); // here im trying to replace the select text with option text which has that url substring
});
You're not concatenating properly. Also you're using getter of text. Instead, use the setter. Also from your comment, I suppose you need
$('#selectdropdown').val(subSting);
Try this mate>I think u are trying to select the option from the selectbox
$('#selectdropdown').find("option[value='"+subSting+"']").attr("selected","selected");
HTML
<select id="selectDepartment">
<option value="1">120</option>
<option value="2">20</option>
<option value="3">140</option>
<option value="4">4120</option>
<option value="5">560</option>
<option value="6">451</option>
<option value="7">310</option>
<option value="8">656</option>
<option value="9">444</option>
<option value="10">555</option>
<option value="11">2560</option>
<option value="12">450</option>
</select>
jQuery
$("#selectDepartment").change( function() {
alert($("select option:selected").val());
});
the above function always shows value 1 on alert, when I select any one of the options
Your method of finding the selection option is vague. You're saying "Grab all <select>s". You then go on to grab the :selected option from each of them (of all <select>s on the page). Continued, .val() takes the first value off the top.
Simply put, you're always fetching the selected value of the first <select> found on the page. Assuming #selectDepartment isn't the first <select>, your value will never change.
Try to keep the scope to within the current <Select> using this:
$('#selectDepartment').change(function(){
var selopt = $('option:selected',this);
});
Note that I specify the scope to within the <select> that triggered the .change(). Also note this really isn't necessary as val() works just as easily:
var selopt = $(this).val();
Let jQuery do the heavy lifting. You really only need option:selected if you want control over styling that specific element, or you're working with a multi-select and want more control.
You can do something like this:
$("#selectDepartment").change( function() {
var selected = $(this).find(":selected");
});
how to set or change value to drop down.
I'm having a drop down list which is initially not selected a value.
How can i select a value using jquery
The val() function is used to get and set the value of input controls (including <select>). Grab a jQuery reference to your <select>, and pass its val() function a string matching the value attribute of the <option> that you wish to select:
$("#mySelect").val("15");
This would select the second option in this list:
<select id="mySelect">
<option value="5">Few</option>
<option value="15">More</option>
<option value="100">Many</option>
</select>
$("#id_select").val("value_1");
id_select -> is the id of your select
value_1 -> is one of the values presents in the option of select