Get the text from a select option - javascript

I'm looking to change an input field where a user write down a word. The word is then took to the javascript by using document.getElementById("myInput1").value;
So basically, in html it's this:
<input type="text" id="myInput1" placeholder="" style="z-index:1"></input>
<span onclick="newElement1()" class="addBtn" style="border-radius: 0px; height:30px">Add</span>
But know what i want is a select field, so the user won't be able to type something wrong or something that doesn't exist in a list:
<select>
<option value="0">Select car:</option>
<option value="1">Audi</option>
<option value="2">BMW</option>
<option value="3">Citroen</option>
<option value="4">Ford</option>
<option value="5">Honda</option>
<option value="6">Jaguar</option>
<option value="7">Land Rover</option>
<option value="8">Mercedes</option>
<option value="9">Mini</option>
<option value="10">Nissan</option>
<option value="11">Toyota</option>
<option value="12">Volvo</option>
</select>
So without changing many things, I want to replace just in the html the input text by a selecting field. Then what the user will choose, it will have the id "myInput1" (and of course javascript knows what to do with this).

You just need to ask for the value of the select instead of the input field.
By the way setting border-radius:0 is the same thing as not setting it at all and you can't set height on a span (unless you change the span to display:block or display:inline-block) because span elements are inline elements and their height is determined by their content.
// If an element has an id, then .getElementById() is the most direct way
// to access it.
let make = document.getElementById("carMake");
// If an element doesn't have an id, .querySelector() is very easy to use
// to get a reference to the element. Here, the selector is for the .addBtn class
document.querySelector(".addBtn").addEventListener("click", function(){
// Get the text of the selected <option>
console.log("You selected: ", carMake.options[carMake.selectedIndex].textContent);
// Get the value of the selected <option>
console.log("You selection has a value of: ", carMake.value);
});
<span class="addBtn">Add</span>
<select id="carMake">
<option value="0">Select car:</option>
<option value="1">Audi</option>
<option value="2">BMW</option>
<option value="3">Citroen</option>
<option value="4">Ford</option>
<option value="5">Honda</option>
<option value="6">Jaguar</option>
<option value="7">Land Rover</option>
<option value="8">Mercedes</option>
<option value="9">Mini</option>
<option value="10">Nissan</option>
<option value="11">Toyota</option>
<option value="12">Volvo</option>
</select>

Try this:
<span class="addBtn" onclick="newElement1()">Add</span>
<select id="carMake">
<option value="0">Select car:</option>
<option value="1">Audi</option>
<option value="2">BMW</option>
<option value="3">Citroen</option>
<option value="4">Ford</option>
<option value="5">Honda</option>
<option value="6">Jaguar</option>
<option value="7">Land Rover</option>
<option value="8">Mercedes</option>
<option value="9">Mini</option>
<option value="10">Nissan</option>
<option value="11">Toyota</option>
<option value="12">Volvo</option>
</select>
<script>
function newElement1() {
var e= document.getElementById("carMake");
var value = e.options[e.selectedIndex].value;
$('#myInput1').val(value); }
</script>

Related

How can I update the value of my selection

I am making a piano website that makes random melodies based on their scales. But when I choose a certain key and/or scale and/or mode(different kind of scale), the dropdown doesn't update in JS.
JS Code:
const specifiedNote = document.querySelector('#keys').value;
const majorMinor = document.querySelector('#types').value;
const mode = document.querySelector('#modes').value;
//Checking to see if it changes ever 4 seconds after I select a different value in the drop box
setInterval(()=>{
console.log(specifiedNote, majorMinor, mode);
}, 4000);
HTML Code:
<div class="keys">
<select name="keys" id="keys">
<option value="C">C</option>
<option value="C#">C#</option>
<option value="D">D</option>
<option value="D#">D#</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="F#">F#</option>
<option value="G">G</option>
<option value="G#">G#</option>
<option value="A">A</option>
<option value="A#">A#</option>
<option value="B">B</option>
</select>
<select name="types" id="types">
<option value="Major">Major</option>
<option value="Minor">Minor</option>
</select>
<select name="modes" id="modes">
<option value="None">None</option>
<option value="Dorian">Dorian</option>
<option value="Phrygian">Phrygian</option>
<option value="Lydian">Lydian</option>
<option value="Mixolydian">Mixolydian</option>
<option value="Aeolian">Aeolian</option>
<option value="Locrian">Locrian</option>
</select>
<select name="amount" id="amount">
<option value="4">4 Notes</option>
<option value="8">8 Notes</option>
<option value="16">16 Notes</option>
</select>
<button class="create">RELODY!</button>
</div>
If you look at the console, you'll see the value is the same over 10
times, but the values in the drop downs are different. How do I fix this?
You must read the element again in the the interval function :
setInterval(()=>{
specifiedNote = document.querySelector('#keys').value;
majorMinor = document.querySelector('#types').value;
mode = document.querySelector('#modes').value;
console.log(specifiedNote, majorMinor, mode);
}, 4000);
You must be reading the value inside the timeout.
Or another method you can do is, make a change event handler for the selects instead of the setTimeout, so the functions work when the select boxes are changed, not periodically.
//Checking to see if it changes ever 4 seconds after I select a different value in the drop box
setInterval(()=>{
const specifiedNote = document.querySelector('#keys').value;
const majorMinor = document.querySelector('#types').value;
const mode = document.querySelector('#modes').value;
console.log(specifiedNote, majorMinor, mode);
}, 4000);
<div class="keys">
<select name="keys" id="keys">
<option value="C">C</option>
<option value="C#">C#</option>
<option value="D">D</option>
<option value="D#">D#</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="F#">F#</option>
<option value="G">G</option>
<option value="G#">G#</option>
<option value="A">A</option>
<option value="A#">A#</option>
<option value="B">B</option>
</select>
<select name="types" id="types">
<option value="Major">Major</option>
<option value="Minor">Minor</option>
</select>
<select name="modes" id="modes">
<option value="None">None</option>
<option value="Dorian">Dorian</option>
<option value="Phrygian">Phrygian</option>
<option value="Lydian">Lydian</option>
<option value="Mixolydian">Mixolydian</option>
<option value="Aeolian">Aeolian</option>
<option value="Locrian">Locrian</option>
</select>
<select name="amount" id="amount">
<option value="4">4 Notes</option>
<option value="8">8 Notes</option>
<option value="16">16 Notes</option>
</select>
<button class="create">RELODY!</button>
</div>
Get Values Inside your set interval code like below.
setInterval(()=>{
let specifiedNote = document.querySelector('#keys').value;
let majorMinor = document.querySelector('#types').value;
let mode = document.querySelector('#modes').value;
console.log(specifiedNote, majorMinor, mode);
},

Ignore 1st option from multiple select box-jquery

I have multiple select box with same options which are mutually exclusive .For example if select box A and select box B has option1 ,option2 and option 3 , Then if I select option1 for select box A, then it should not be available on select box B
My demonstration
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
$('.alert_type').change(function() {
var selected_value=$(this).val();
$(".alert_type option[value='" + selected_value + "']").not(this.selectedOptions[0]).hide();
});
But I want to make 1st option as exception i.e <option value="">Select below</option> as I need flexibility to revert all the option
You can see on fiddle below , if I select option1 from select box 1 ,"select below" from option 3 is also removed which I want to put in exception
Fiddle
https://jsfiddle.net/timus2001/rbuyk7na/3/
When I try with
$(".alert_type option").show();
to show all at first it is not mutually exclusive any more (see the picture)
Ok. let me see if I get you this time:
$('.alert_type').change(function() {
var selected_values = [],
iteration;
$(".alert_type option").show();
$(".alert_type").each(function(){
iteration = $(this).find('option:selected').val();
if ( iteration !== "" ) {
selected_values.push( iteration );
}
})
for ( var i = 0; i < selected_values.length; i++ ) {
$(".alert_type option[value='"+ selected_values[i] +"']").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="select" class="alert_type">
<option selected>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
This is what you need:
$('select.alert_type').on('change keyup',function() {
var val = $(this).val();
$('select.alert_type option').prop('disabled',false);
$(this).siblings().find('option[value='+val+']').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
Good luck :D

Selecting through text in select_list not through index

I am new to JavaScript,
I know how to select a select_list by
document.getElementById("entry_1000001").selectedIndex=2
But Is there any way available to select through text directly something like
document.getElementById("entry_1000001").select("Ruby")
HTML Element follows
<select name="entry.1000001" id="entry_1000001" aria-label="What language does Watir-WebDriver use? " aria-required="true" required=""><option value=""></option>
<option value="Java">Java</option> <option value="Ruby">Ruby</option> <option value="C#">C#</option> <option value="Clojure">Clojure</option> <option value="Python">Python</option></select>
document.getElementById("entry_1000001").value = "Ruby";
<select name="entry.1000001" id="entry_1000001">
<option value=""></option>
<option value="Java">Java</option>
<option value="Ruby">Ruby</option>
<option value="C#">C#</option>
<option value="Clojure">Clojure</option>
<option value="Python">Python</option>
</select>

How to Set a Dropdown Option Value by Id

<select id=workTypeSelection>
<option id="-1">-Select a Work Type-</option>
<option id="1">Common</option>
<option id="3">Computer Maintenance</option>
<option id="5">Facility Maintenance</option>
<option id="19">Furniture Move</option>
<option id="85">Global Work Type</option>
<option id="24">Lease Request</option>
<option id="21">Move Responsibility</option>
<option id="20">Purchase Request</option>
<option id="16">SLA Maintenance</option>
<option id="60">Test 123</option>
<option id="72">TEST J</option>
<option id="73">test jj</option>
<option id="65">TEST JOS</option>
</select>
How to Select "Test 123" as Currently selected option in The Dropdown list using jquery on page Ready using option id-> 60.
Try any from below,
$('select option[id="<your_value>"]').attr("selected",true)
$('#selectTagId option[id="<your_value>"]').attr("selected",true)
$('.selectTagClass option[id="<your_value>"]').attr("selected",true)

drop down + user input (text)

Hi guys I've looked around and I haven't really gotten a really good answer on this.
So I have a drop down list that allows my users to pick which city they live in and stuff. However I want it so that that drop down has the ability to allow users to first type in their value first or select a value from the drop down.
Here is what I have so far:
<div class="atl_form_row">
<div class="atl_left"><span class="mandatory">*</span>
<label class="control-label atlFormLabel" for="Service City">Service City/County:</label>
</div>
<div class="atl_right">
<select id="ServiceCity" name="ServiceCity">
<option value "" disabled selected>Select City/County</option>
<option value="Alpharetta">Alpharetta</option>
<option value="Atlanta">Atlanta</option>
<option value="Brookhaven">Brookhaven</option>
<option value="Chamblee">Chamblee</option>
<option value="Chattahoochee Hills">Chattahoochee Hills</option>
<option value="College Park">College Park</option>
<option value="Decatur">Decatur</option>
<option value="Douglasville">Douglasville</option>
<option value="Duluth">Duluth</option>
<option value="Dunwoody">Dunwoody</option>
<option value="East Point">East Point</option>
<option value="Fairburn">Fairburn</option>
<option value="Fulton County">Fulton County</option>
<option value="Hapeville">Hapeville</option>
<option value="Johns Creek">Johns Creek</option>
<option value="Marietta">Marietta</option>
<option value="Milton">Milton</option>
<option value="Mountain Park">Mountain Park</option>
<option value="Newnan">Newnan</option>
<option value="Palmetto">Palmetto</option>
<option value="Riverdale">Riverdale</option>
<option value="Roswell">Roswell</option>
<option value="Sandy Springs">Sandy Springs</option>
<option value="Smyrna">Smyrna</option>
<option value="Union City">Union City</option>
</select>
</div>
</div>';
The new HTML5 <datalist> element is what you are looking for:
<input list="ServiceCity">
<datalist id="ServiceCity" name="ServiceCity">
<option value "" disabled selected>Select City/County</option>
<option value="Alpharetta">Alpharetta</option>
<option value="Atlanta">Atlanta</option>
<option value="Brookhaven">Brookhaven</option>
<option value="Chamblee">Chamblee</option>
<option value="Chattahoochee Hills">Chattahoochee Hills</option>
<option value="College Park">College Park</option>
<option value="Decatur">Decatur</option>
<option value="Douglasville">Douglasville</option>
<option value="Duluth">Duluth</option>
<option value="Dunwoody">Dunwoody</option>
<option value="East Point">East Point</option>
<option value="Fairburn">Fairburn</option>
<option value="Fulton County">Fulton County</option>
<option value="Hapeville">Hapeville</option>
<option value="Johns Creek">Johns Creek</option>
<option value="Marietta">Marietta</option>
<option value="Milton">Milton</option>
<option value="Mountain Park">Mountain Park</option>
<option value="Newnan">Newnan</option>
<option value="Palmetto">Palmetto</option>
<option value="Riverdale">Riverdale</option>
<option value="Roswell">Roswell</option>
<option value="Sandy Springs">Sandy Springs</option>
<option value="Smyrna">Smyrna</option>
<option value="Union City">Union City</option>
</datalist>
As the user types in the <input>, the options from the datalist drop down. Or, a double click makes the whole list drop, like a select.
See this JSFiddle for a demo

Categories