This question already has answers here:
jQuery select option elements by value
(9 answers)
Closed 1 year ago.
Suppose the below HTML dropdown:
I am looking for the javascript to get desired option text base on its value.
Like if asked for what is the text on value="2"?
Answer: "Value 2"
I tried the below jquery code:
$(document).ready(function() {
var value = "2";
// I am getting an error as a output on console
var textValue = $("#test").options[value.selectedIndex].text;
console.log(textValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="test" name="test">
<option value="0">Select Value...</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
This should work for you:
$(document).ready(function () {
var value = "2";
// I am getting "0" as a output on console
var textValue = $("#test>option[value=" + value + "]").html();
console.log(textValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="test" name="test">
<option value="0">Select Value...</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
Related
I have two comboboxes. I want to know which combobox is selected. I want to do like below using ajax, jquery in a jsp file.
if(combobox1 selected)
{
action 1
}
if(combobox2 selected)
{
action 2
}
Thanks.
would it be this ? in this case you could know which was the last modified element. I used switch case because you could have several comboxes
<div class="wrapper">
<select class="my_combox" name="combox1">
<option value="1">value 1</option>
<option value="2">value 2</option>
<option value="3">value 3</option>
<option value="4">value 4</option>
</select>
<select class="my_combox" name="combox2">
<option value="5">other value 1</option>
<option value="6">other value 1</option>
<option value="7">other value 1</option>
<option value="8">other value 1</option>
</select>
</div>
Script
var lastSelectedCombox = "";
$('.my_combox').on('change',function(e){
lastSelectedCombox = $(this).attr('name');
switch(lastSelectedCombox){
case 'combox1':console.log('first combox');
break;
case 'combox2':console.log('second combox');
break;
default:
console.log('any combox expected');
}
})
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());
}
I'm trying to change the id of the select field with a JS function, please take a look at my HTML and JS code.
HTML:
<select name="cat-parent" id="change_id();">
<option selected="selected" value=""></option>
<option value="category-2">Category 2</option>
<option value="category-3">Category 3</option>
<option value="category-4">Category 4</option>
<option value="category-2">Category 2</option>
<option value="category-1">Category 1</option>
</select>
JS:
function change_id(){
var idSuffix = jQuery(this).val();
return 'example' + idSuffix;
}
You need to bind change event handler.
$('[name=cat-parent]').on('change', function() {
$(this).attr("id", 'example' + $(this).val());
});
I have 3 dropdowns which contains more than 4 questions as options in each dropdowns. What I want to achieve is when a user selects one option from any dropdown, that particular option/question has to be hidden from other 2 dropdowns and when he changes his selection that option/question has to be shown again in the other 2 dropdowns. He can select questions from any dropdowns. Here is what I have tried till now. This particular piece of code will hide the options on select but I am not getting how exactly I can show it up back.
Javascript
var removeSelection = function (select) {
$('select').filter(':not(#' + select.attr('id') + ')').each(function () {
var index = select.find(':selected').index();
$(this).find('option:eq(' + index + ')').hide();
});
};
$(function () {
$('select').change(function () {
removeSelection($(this));
});
});
HTML
<form id="form1">
<select id="select1">
<option id="selectOpt1">Question 1</option>
<option id="selectOpt2">Question 2</option>
<option id="selectOpt3">Question 3</option>
<option id="selectOpt4">Question 4</option>
</select>
<select id="select2">
<option id="selectOpt1">Question 1</option>
<option id="selectOpt2">Question 2</option>
<option id="selectOpt3">Question 3</option>
<option id="selectOpt4">Question 4</option>
</select>
<select id="select3">
<option id="selectOpt1">Question 1</option>
<option id="selectOpt2">Question 2</option>
<option id="selectOpt3">Question 3</option>
<option id="selectOpt4">Question 4</option>
</select>
</form>
JSFIDDLE-
CLick Here
Updated Fiddle
Updated
Scenario 1 - Select one option from any dropdown.It should be disabled from other dropdowns.
Scenario 2 - Change option from same dropdown. Previous option should be enabled in other dropdowns.
Once you change the duplicate id's to common classes, You can try something like this
$('select').change(function () {
$("option:disabled").prop("disabled",false); // reset the previously disabled options
var $selectedQ = $(this).find("option:selected"); // selected option
var commonClass= $selectedQ.attr("class"); // common class shared by the matching options
$("."+commonClass).not($selectedQ).prop("disabled","disabled"); // disable the matching options other than the selected one
});
Updated Fiddle
(This won't work if there are more than one, different classes for the options, i'd use a common value or data attribute instead like)
$('select').change(function () {
$("option:disabled").prop("disabled", false);
var $selectedQ = $(this).find("option:selected")
var value = $selectedQ.val();
$("option[value='" + value + "']").not($selectedQ).prop("disabled", "disabled");
});
Demo
Update (as per comments)
$('select').change(function () {
var prevMatches = $(this).data("prevMatches");
if (prevMatches) prevMatches.prop("disabled", false)
var $selectedQ = $(this).find("option:selected")
var value = $selectedQ.val();
var $matches = $("option[value='" + value + "']").not($selectedQ);
$matches.prop("disabled", "disabled");
$(this).data("prevMatches", $matches);
});
Demo
You could do something like this:
var removeSelection = function (select) {
var id=select.attr("id");
$(".hide-"+id).show();
$('select').filter(':not(#' + select.attr('id') + ')').each(function () {
var index = select.find(':selected').index();
$(this).find("option").removeClass("hide-"+id);
$(this).find('option:eq(' + index + ')').each(function(){
if($(this).attr("id")!="selectOpt1"){
$(this).addClass("hide-"+id);
}
});
});
$(".hide-"+id).hide();
};
$(function () {
$('select').change(function () {
removeSelection($(this));
});
});
JSFiddle
Take a look
<form id="form1">
<select id="select1">
<option value="Question1">Question 1</option>
<option value="Question2" >Question 2</option>
<option value="Question3" >Question 3</option>
<option value="Question4" >Question 4</option>
</select>
<select id="select2">
<option value="Question1">Question 1</option>
<option value="Question2" >Question 2</option>
<option value="Question3" >Question 3</option>
<option value="Question4" >Question 4</option>
</select>
<select id="select3">
<option value="Question1">Question 1</option>
<option value="Question2" >Question 2</option>
<option value="Question3" >Question 3</option>
<option value="Question4" >Question 4</option>
</select>
</form>
$(document).on('change','select',function(e){
var elm = $(this);
elm.find('option').show();
$('select').not(elm).find('option',each(function(){
if($(this).attr('value')==$(elm).val()){
$(this).hide();
}else{
$(this).show();
}
}));
});
This question already has answers here:
keep user checked radiobtn checked even after postback
(2 answers)
Closed 5 months ago.
How do I retain whatever was selected from the dropdown even after page refresh so user knows what he/she selected using jquery? or javascript?
<select id="hospitalDropDown" onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<option disabled="disabled">Select Hospital</option>
<option value="http://mysite.com/events/Pages/default1.aspx">All Hospitals</option>
<option value="http://mysite.com/events/Pages/default1.aspx?hos=Dyer">Dyer</option>
<option value="http://mysite.com/events/Pages/default1.aspx?hos=Carmel">Carmel</option>
</select>
Try this:
<select id="hospitalDropDown" onchange="window.open('http://mysite.com/events/Pages/default1.aspx?hos='+this.value,'_top')">
<option disabled="disabled">Select Hospital</option>
<option value="All">All Hospitals</option>
<option value="Dyer">Dyer</option>
<option value="Carmel">Carmel</option>
</select>
$(document).ready(function(){
var value = window.location.href.match(/[?&]hos=([^&#]+)/) || [];
$('#hospitalDropDown').val(value[1]);
});
<select id="hospitalDropDown">
<option value="">All Hospitals</option>
<option value="Dyer">Dyer</option>
<option value="Carmel">Carmel</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
$('#hospitalDropDown').val('<?php echo $_GET['hos']; ?>');
$('#hospitalDropDown').change(function() {
location.href = 'http://mysite.com/events/Pages/default1.aspx?hos=' + $(this).val();
});
});
</script>