Getting Value of Drop-Down List with Javascript - javascript

I am wanting to make a drop-down menu for a website, and then obtain the value of the user's decision with JavaScript. I have followed other resources on the web; but it doesn't seem to work. It just keeps returning the word 'Select something...'; even when I change it.
<select id="dropDown" onChange="output()">
<option value="0">Select something...</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<script>
var value = document.getElementById("dropDown");
var strUsr = value.options[value.selectedIndex].text;
function output(){
console.log(value);
}
output();
</script>

It will working for you
<select id="dropDown" onchange="output(this)">
<option value="0">Select something...</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
function output(dropDown)
{
alert(dropDown.options[dropDown.selectedIndex].innerHTML);
}

Do it like this
<select id="dropDown" onChange="output(this)"> //added this here
<option value="0">Select something...</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
function output(sender){
alert(sender.options[sender.selectedIndex].text);
}
Demo Fiddle

If you have a select element that looks like this:
<select id="dd">
<option value="1">t1</option>
<option value="2" selected="selected">t2</option>
<option value="3">t3</option>
</select>
Running this code:
var e = document.getElementById("dd");
var strUser = e.options[e.selectedIndex].value;
strUser will be 2.
var e = document.getElementById("dd");
var strUser = e.options[e.selectedIndex].text;
strUser will be t2

Related

Alert when selecting some particular value from drop down in JavaScript

Below are the dropdown data..
<select size="1" name="Test_Data">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
I want to get alert/pop up when I select the data which is start from IN in drop down list.
Try this:
https://jsfiddle.net/mminetto/bggwnkwj/
var select = $('select[name="Test_Data"]');
select.on('change', function(){
var options = select.children('option:selected');
if(options.length > 0 && options[0].innerText.startsWith("IN")){
alert(this.value);
alert(options[0].innerText);
}
});
<select size="1" name="Test_Data" id="dropdown">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
in javascript
<script>
$("#dropdown").change(function(){
if($(this).find("option:selected").text().startsWith("IN")){
alert("option with IN selected =>"+$(this).find("option:selected").text());
}
});
</script>
Try this code
HTML
<select size="1" onChange="showAlert()" id="dataCountry" name="Test_Data">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
</select>
JavaScript
<script>
function showAlert() {
var el = document.getElementById('dataCountry'); // get the index
var text = el.options[el.selectedIndex].innerHTML; // get the label
var n = text.search("IN"); //search number of IN
if(n>=0) {
alert(text);
}
}
</script>

HTML Forms with drop down items, how to remove it from in realtime for the next form?

I have a JSP page that is populating 3 different drop down menus.
They are all populated the same. I am looking for a javascript way that in realtime if they choose one from the dropdown the next one they go to the dropdown list won't have that option in it.
Say you have 3 selects "Select1","Select2",and "Select3". Add onchange event to "Select1":
<script language="javascript">
function Select1_OnChange() {
var elemSelect1 = document.getElementById("Select1");
var elemSelect2 = document.getElementById("Select2");
var elemSelect3 = document.getElementById("Select3");
var selValue = elemSelect1.options[elemSelect1.selectedIndex].value;
elemSelect2.remove(getIndexFromValue(elemSelect2,selValue));
elemSelect3.remove(getIndexFromValue(elemSelect3, selValue));
}
function Select2_OnChange() {
var elemSelect2 = document.getElementById("Select2");
var elemSelect3 = document.getElementById("Select3");
var selValue = elemSelect2.options[elemSelect2.selectedIndex].value;
elemSelect3.remove(getIndexFromValue(elemSelect3, selValue));
}
function getIndexFromValue(objSelect,strValue) {
var ret;
for (i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == strValue) {
ret = i;
}
}
return ret;
}
</script>
Tags might look like:
<select id="Select1" name="Select1" size="1" onchange="Select1_OnChange()>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
<select id="Select2" name="Select2" size="1" onchange="Select2_OnChange()>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
<select id="Select3" name="Select3" size="1">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>

Selecting the last value from the dropdown and disable it for other dropdowns

I have 3 drop-downs with values: Select, One, Two, Three and following is the HTML.
<select class="dpdown" id="box1">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Tow</option>
<option value="Three">Three</option>
</select>
<select class="dpdown" id="box2">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Tow</option>
<option value="Three">Three</option>
</select>
<select class="dpdown" id="box3">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Tow</option>
<option value="Three">Three</option>
</select>
Conditions
First of all the jQuery function should store the current values from all the boxes.
If the user select One from #box1, then it (One) should be disabled from all other boxes, and if Two is selected from #box1 again, then Two is disabled from other boxes and One gets enabled. i.e. the last value is disabled not all the values.
Also to be noted that the user can select from any of the dropdowns whether it is box1/box2 or box3.
EDIT
$(document).ready(function(){
$('#box1').data('pre', $(this).val()); // added this line to get the pre value.
$("select").change(function(e){
var id = $(this).attr("id");
var before_change = $(this).data('pre');
alert(before_change); // alert shows blank values
});
});
I want to do this with jQuery. Please help.
Like this:
$(".dpdown").on("change", function() {
var sel = $(this).val();
$(".dpdown").find("option").prop("disabled", false);
$(".dpdown").not(this).find("option[value='" + sel + "']").prop("disabled", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dpdown" id="box1">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Tow</option>
<option value="Three">Three</option>
</select>
<select class="dpdown" id="box2">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Tow</option>
<option value="Three">Three</option>
</select>
<select class="dpdown" id="box3">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Tow</option>
<option value="Three">Three</option>
</select>
Try something like this:
var $selects = $('.dpdown').change(function() {
var val = $(this).val();
$selects
.children().prop('disabled', false)
.end().not(this)
.find('[value="' + val + '"]').prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dpdown" id="box1">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<select class="dpdown" id="box2">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<select class="dpdown" id="box3">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
The idea is that you bind change event to all select boxes. Then when event happens you enable all options from all selectboxes, then you find option with matching value from other selects (other then current this) and disable them.
You code simple :
<script>
$('select').on('change', function() {
$("select option").removeAttr('disabled');
$("select option[value=" + $(this).val() + "]").attr('disabled','disabled')
});
</script>
DEMO
Try something like this:
UPDATED
var $selects = $(".dpdown").change(function() {
var selectedValues = [];
$.each($selects, function(index, select) {
var value = $(select).val();
if (value != "Select") {
selectedValues.push(value);
}
});
$selects
.find("option")
.prop("disabled", false);
$.each(selectedValues, function(index, value) {
$selects
.find("option[value='" + value +"']")
.not(":selected")
.prop("disabled", true);
});
});
Demo

Hide/Remove an option value from select if a value is selected/changed

I wanted to hide or remove the <option value=" "></option> when some value is selected from another drop down.
So this is something how I need it:
<Select id="first">
<option value="1">one</option>
<option value="2">two</option>
</select>
Now, when a option two is selected, the below drop down's first value which is a blank string "" should either get remove or hide from the selection.
<select id="too">
<option value=""></option>
<option value="time"time</option>
</select>
JQuery is a very effective library and I am still getting into it as a begineer. Any help on how to do this would be a great help
$( "#first" ).change(function() {
if(2 == $(this).val()){
$("#too").children()[0].remove();
}
});
http://jsfiddle.net/NHM28/
Here is your solution plain javascript
<html>
<Select id="firstSelect">
<option value="1">one</option>
<option value="2">two</option>
</select>
<select id="secondSelect">
<option value=""></option>
<option value="time">time</option>
</select>
<script>
var node = document.getElementById("firstSelect");
node.addEventListener('change', removeOptionTag);
function removeOptionTag(){
var secNode = document.getElementById('secondSelect');
var allTags = secNode.getElementsByTagName('option');
secNode.removeChild(allTags[0]);
}
</script>
</html>
Here's a way of doing it.
HTML:
<select>
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
JS:
$(document).ready(function(){
$("select").click(function(){
if($("select option:selected").val() != ""){
$("select option[value='']").hide();
}
});
});
http://jsfiddle.net/9w6cN/

Cascading Combo box HTML

I am not really a web person and am having trouble creating a cascading combo box. I have my options, but when I cannot figure out how to do a JavaScript command to switch the second box depending on the first box's selection.
These are my first set of options:
<select id="searchType" onchange="selectedOption(this)">
<option value="sessions">Sessions</option>
<option value="files">Files</option>
<option value="clients">Clients</option>
</select>
Depending on what they click there I would like to show these set of options:
SESSIONS
<select id="secondOptions">
<option value="conf">Config ID</option>
<option value="length">Length</option>
<option value="date">Date</option>
</select>
FILES
<select id="secondOptions">
<option value="id">File ID</option>
<option value="length">Length</option>
<option value="sent">Sent</option>
<option value="sessionId">Session ID</option>
</select>
CLIENTS
<select id="secondOptions">
<option value="name">Client Name</option>
<option value="organization">Organization</option>
<option value="specialty">Specialty</option>
<option value="sessionId">Session ID</option>
</select>
And finally a textbox to type into to really specify the search.
Once again, I am trying to do this using JavaScript, but if there is a better way to do this let me know please.
Given the amended html mark-up:
<form action="#" method="post">
<select id="searchType">
<option value="sessions">Sessions</option>
<option value="files">Files</option>
<option value="clients">Clients</option>
</select>
<select id="sessions">
<option value="conf">Config ID</option>
<option value="length">Length</option>
<option value="date">Date</option>
</select>
<select id="files">
<option value="id">File ID</option>
<option value="length">Length</option>
<option value="sent">Sent</option>
<option value="sessionId">Session ID</option>
</select>
<select id="clients">
<option value="name">Client Name</option>
<option value="organization">Organization</option>
<option value="specialty">Specialty</option>
<option value="sessionId">Session ID</option>
</select>
<fieldset id="textAreaSearchBox">
<legend>Search:</legend>
<textarea></textarea>
</fieldset>
</form>
(Note the changed ids, wrapping the form elements in a form, the addition of a fieldset, legend and textarea in the mark-up), the following JavaScript seems to work:
var select1 = document.getElementById('searchType');
var selects = document.getElementsByTagName('select');
select1.onchange = function() {
var select2 = this.value.toLowerCase();
for (i = 0; i < selects.length; i++) {
if (selects[i].id != this.id) {
selects[i].style.display = 'none';
}
}
document.getElementById(select2).style.display = 'block';
document.getElementById('textAreaSearchBox').style.display = 'block';
};
JS Fiddle demo.

Categories