I have a standard drop down list and I would like it to display the VALUE when closed but the text when expanded for selection. For example, based on my code below, if the user selects 'Item 3' from the list, 3 should be displayed when the list is closed. I'm to the point where I can get the value selected but I don't know how to rewrite what is displayed in the drop down list.
Appreciate any help!
<script type="text/javascript">
function setValue()
{
var value=document.getElementById("mySelect").value;
//Don't know what to put here
}
</script>
<select name="mySelect" id="mySelect" onchange="setValue();">
<option value="1" selected="">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
</select>
Declare the mySelect variable which contains the <select> DOM. Then by using mySelect, you can get the attributes of the <select> tag.
var mySelect = document.getElementById("mySelect");
Then, you can access to the mySelect options which is an array.
mySelect.options[]
mySelect.selectedIndex will give you the current selected index of the tag.
Finally, by appending the .text attribute, you can set the new value of the current selection.
mySelect.options[mySelect.selectedIndex].text = mySelect.value;
Something like this:
function setValue() {
var mySelect = document.getElementById("mySelect");
mySelect.options[mySelect.selectedIndex].text = mySelect.value;
}
<select name="mySelect" id="mySelect" onchange="setValue();">
<option value="1" selected="">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
</select>
Related
when I open the combobox via contextMenu, always the same item is selected.
How can I determine that one of the other items is selected?
For instance, there are 3 items "car1", "car2", "car3" and when I open the combobox "car1" appears in the list first. So how would I get e.g. "car2" appears in the list first?
Thanks very much!
if you mean a select element, you can change the order of items
<select id="list">
<option value="2">Car 2</option>
<option value="1">Car 1</option>
<option value="3">Car 3</option>
</select>
you could also set the default item with the selected attribute:
<select id="list">
<option value="1">Car 1</option>
<option value="2" selected>Car 2</option>
<option value="3">Car 3</option>
</select>
in JS you simply have to set the value of your select
const myForm = document.forms['my-form']
// set the select on the second cat
myForm.miaou.value = 'c2'
<form action="xxx" name="my-form">
<!-- other form elements -->
<select name="miaou">
<option value="c1">Cat 1</option>
<option value="c2">Cat 2</option>
<option value="c3">Cat 3</option>
</select>
</form>
I have same classname multi select box with same values in body, what I want if use chose value 1 from first or any select box then that value 1 on all other select box option will disable so user can't choose the same value in other multi select box.
<select name="mySel" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
This need to achieve via javascript or jQuery,
So you're likely going to get downvotes. You haven't actually shown that you've tried anything, you have only given us the HTML and asked that we solve your problem.
That said, I like to sink my teeth into easy problems, as this is. What you're wanting to do is, in each select, listen for the change event. When that triggers, get the value of the selected option, and disable any option with that value in any other selects. Take a look at the following:
$(function() {
/********
* Function to disable the currently selected options
* on all sibling select elements.
********/
$(".myselect").on("change", function() {
// Get the list of all selected options in this select element.
var currentSelectEl = $(this);
var selectedOptions = currentSelectEl.find("option:checked");
// otherOptions is used to find non-selected, non-disabled options
// in the current select. This will allow for unselecting. Added
// this to support extended multiple selects.
var otherOptions = currentSelectEl.find("option").not(":checked").not(":disabled");
// Iterate over the otherOptions collection, and using
// each value, re-enable the unselected options that
// match in all other selects.
otherOptions.each(function() {
var myVal = $(this).val();
currentSelectEl.siblings(".myselect")
.children("option[value='" + myVal + "']")
.attr("disabled", false);
})
// iterate through and disable selected options.
selectedOptions.each(function() {
var valToDisable = $(this).val();
currentSelectEl.siblings('.myselect')
.children("option[value='" + valToDisable + "']")
.attr("disabled", true);
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="mySel" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel2" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel3" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel4" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
Edited the above code to support multiple selects. Actually, it wasn't so much an issue of multiple selects, as I was doing a very lazy handling of unselecting options. Now, when the user is selecting or de-selecting options in any select, only the non-disabled options in that select are used: the (":checked") to disable that option in all other selects, and the .not(":checked") to re-enable any options that the user has somehow unselected.
Try this code , it should do the job:
using Not selector and for each to iterate on other select options:
$(document).ready(function() {
$('.myselect:first').change(function() { // once you change the first select box
var s = $('.myselect:first option:selected').val(); // get changed or clicked value
others = $(':not(.myselect:first) >option'); //select other controls with option value
others.each(function() {
if (this.value == s) // for example if you click on 1 the other controls will get 1 disabled
$(this).attr('disabled', 'disabled').siblings().removeAttr('disabled');
// remove disabled from others if you click something else
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="myselect" multiple="multiple" name="mySel">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select class="myselect" multiple="multiple" name="mySel">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
I'm trying to create a working function that will hide specific select options based on certain values. The options will not have a class or id so I need to use the option value as an identifier.
Does anyone see a problem with this function?
function delivery_rate(valMap) {
if(valMap === 5000){
$(".addon-select option[value="1-day-1"]").setAttribute("hidden", true);
}
}
Instead of applying hidden on the options tag, create different versions of <select> and set all to be hidden. When a user selects a value that matches the criteria of that <select> tag, show that specific tag.
<select name="select" class="first-select">
<option value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</select>
<select name="select" class="second-select">
<option value="value4">Value 1</option>
<option value="value5" selected>Value 2</option>
<option value="value6">Value 3</option>
</select>
I've had a hard time finding a similar question for this, and its probably simple but just slipping my mind.
I've got a drop down menu, you make your selection and submit it, it jumps to 2ndpage.html?location=locationName
I'm trying to create a variable with a value of the "locationName" to use in a link that would use that value as a string like "www.locationName.com",
i've tried using something like
var locationName = getElementById("location").value;
and other similar ways but the variable seems to keep coming up undefined. And this seems to be the only thing stopping me from finishing my project, lol.
Thanks in advance.
You would find the value and text by accessing this.selectedIndex of the selection list. Use http:// for absolute link to a page.
<select id="locations">
<option value="http://www.google.com">Location 1</option>
<option value="http://www.loogle.com" selected="selected">Location 2</option>
<option value="http://www.foogle.com">Location 3</option>
</select>
var e = document.getElementById("locations");
e.addEventListener('change', function (){
var locationValue = this.options[this.selectedIndex].value;//www.loogle.com
var locationText = this.options[this.selectedIndex].text;//Location 2
window.location = locationValue;
});
Try this:
<p>Location: </p>
<select id="location">
<option value="location1">location 1</option>
<option value="location2">location 2</option>
<option value="location3">location 3</option>
</select>
<script>
var locationName = document.getElementById("location").value;
</script>
Or try this:
<p>Location: </p>
<select name="location">
<option value="location1">location 1</option>
<option value="location2">location 2</option>
<option value="location3">location 3</option>
</select>
<script>
var locationName = document.getElementsByName("location")[0].value;
</script>
This question already has answers here:
Get selected value in dropdown list using JavaScript
(32 answers)
Closed 6 years ago.
I need to access the value selected from a drop down list using Javascript. But every time I get 'null' as the answer though a list item is selected.
My HTML page:
<select class="mySelect">
<option value="st1" selected="selected">Create new Stream</option>
<option value="st1">Stream 1</option>
<option value="st2">Stream 2</option>
<option value="st3">Stream 3</option>
<option value="st4">Stream 4</option>
</select>
<input type="button" value="show attributes" class="panel-button-attr" onclick="choice()">
When the above button is clicked, the selected value should be alerted to the user. So in my Javascript function:
function choice() {
var choice=document.getElementById("mySelect");
alert(choice);
var strUser = choice.options[choice.selectedIndex].text;
alert(strUser.toString());
}
Here, I've tried to use the first alert to check if any selected list item is identified correctly. But, at this point, it displays null and the strUsr line doesn't run at all.
I know this is actually a trivial task but am finding it hard to figure this inconsistency.
Please change your HTML element attribute.
You've mentioned 'mySelect' as class and in JS, you are calling it with ID reference.
You have to specify id of select element
<select class="mySelect" id="mySelect">
follow the code:
you need to give id to dropdown because you try to get data by id so...
<select id="mySelect" class="mySelect">
<option value="st1" selected="selected">Create new Stream</option>
<option value="st1">Stream 1</option>
<option value="st2">Stream 2</option>
<option value="st3">Stream 3</option>
<option value="st4">Stream 4</option>
</select>
I hope this will solve your issue....
Thanks...
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
plunker: https://plnkr.co/edit/Q7yyVvUTaLYvPaDW5j7G?p=preview
<select id="mySelect" class="mySelect" >
<option value="st1" selected="selected">Create new Stream</option>
<option value="st1">Stream 1</option>
<option value="st2">Stream 2</option>
<option value="st3">Stream 3</option>
<option value="st4">Stream 4</option>
</select>
function choice() {
var choice=document.getElementById("mySelect");
alert(choice.value); // get value
var strUser = choice.options[choice.selectedIndex].text;
alert(strUser.toString());
}
You didn't have id in your html ,so I try by class name..
function choice() {
var choice=document.getElementsByClassName("mySelect");
var strUser = choice[0].options[choice[0].selectedIndex].text;
alert(strUser.toString());
}