Hello everyone how can I get two values from different select boxes? I get first value in my select box but I can't get the second value from another select box.Here is my javascript code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var select = document.forms[0].sel;
var select2=document.forms[0].sel2;
select.onchange = function () {
var value = select.options[select.selectedIndex].value; // to get Value
alert(value);
}
select2.onchange = function () {
var value2 = select2.options[select2.selectedIndex].value; // to get Value
alert(value2);
}
});
</script>
<form>
<SELECT NAME="sel" onChange="split(selected value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
<form>
<SELECT NAME="sel2" onChange="split(selected value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
The second select box is in the second form. So:
var select2 = document.forms[1].sel2;
That said, you can actually use jQuery for these things:
// bind a change event handler to the second select
$("select").eq(1).on("change", function() {
alert( $(this).val() );
});
jQuery Tip - Getting Select List Values
var foo = [];
$('#multiple :selected').each(function(i, selected){
foo[i] = $(selected).text();
});
$(document).ready(function () {
$('#sel').change(function(){ $('#sel option:selected').val(); });
give id to your select control
<SELECT id="sel">
with help of jQuery ( i suggest the logic, not the solution )
$(document).on('change', 'select', function(){
var selecetdOption = $(this).val();
alert(selecetdOption );
});
Working Demo
You have wrong into your javascript because you have put
var select2=document.forms[0].sel2;
try to put
var select2=document.forms[1].sel2;
and it works!
Related
I'm using selectize plugin and trying to alert custom data-attribute.
I tried with several method but it alway indefined result
My select list :
<select name="location_work{{counter}}" id="location_work{{counter}}" class="list_type_op" data-md-selectize-inline required>
<option data-data='{"param": 0}' value="1">Construction</option>
<option data-data='{"param": 1,"name":"x"}' value="2">Puchase</option>
<option data-data='{"param": 2,"name":"x-y"}' value="3">Warranty</option>
</select>
And my js function
$(document).on('change', '.list_type_op', function () {
var selected_option = this.value;
var nbParam = $('option:selected', this).attr('data-param');
alert(nbParam); //is indefined
});
Select list is in Estimated price section on Type Column
Here my jsfiddle : Jsfiddle
Finally i get value of attribute with this :
$(document).on('change', '.list_type_op', function () {
var selected_option = this.value;
var nbParam = $(".selectize-dropdown-content").find(`[data-value='${selected_option}']`).attr('data-param');
alert(nbParam);
});
I search attribute in html code.
Look, i'm getting crazy, i can't get the selected item inside a normal select dropdown list (The values of the list are created dynamiclly with js).
I have a list of items and that are the columns of a table and i want when i click on an item, the column is added to the table and if i click another time in that item the column is removed.
I've tried to use a change event with jquery and onchange event with js but if i select the item two times in a row the column is added but not removed because the value hasn't changed.
I've tried to give a onclick event to the options of the select but nothing happens when i click on one. I've tried to capturo the clicked option from the select with jquery with this code:
$("#selectTableLt").on("click", "option", function() {
let clickedOption = $(this);
console.log(clickedOption);
});
But nothing happens.
Can anyone help me with this, please? Thank you
Edit:
My html:
<select name="leftColumns" id="selectTableLt"></select>
I load the options with javascript but they look like:
<option value="opt1">Option 1</option>
It's very simple
Check this out
<!DOCTYPE html>
<html>
<head>
<title>Select from dropdown list</title>
</head>
<body>
<h1>Select from dropdown list</h1>
<p id="result">Result here</p>
<select id="country">
<option value="None">-- Select --</option>
<option value="ID1">America</option>
<option value="ID2" selected>India </option>
<option value="ID3">England</option>
</select>
<script>
function GetSelectedValue(){
var e = document.getElementById("country");
var result = e.options[e.selectedIndex].value;
document.getElementById("result").innerHTML = result;
}
function GetSelectedText(){
var e = document.getElementById("country");
var result = e.options[e.selectedIndex].text;
document.getElementById("result").innerHTML = result;
}
</script>
<br/>
<br/>
<button type="button" onclick="GetSelectedValue()">Get Selected Value</button>
<button type="button" onclick="GetSelectedText()">Get Selected Text</button>
</body>
</html>
here is a solution to handle the multiple click events and fetch the dropdown selected value
var oldValue = null;
$(document).on("click","#selectTableLt", function(){
s = $(this);
val = s.val();
if (oldValue == null) {
oldValue = val;
} else {
var newValue = s.val();
if (newValue != "") {
var finalVal = oldValue == s.val() ? oldValue : newValue;
console.log(finalVal)
}
$(document).unbind('click.valueCheck');
oldValue = null;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectTableLt">
<option value="0">One</option>
<option value="1">Two</option>
</select>
You need to fetch the value using $.val() function
bind event to document in order to handle the dynamic event listener
$(document).on( eventName, selector, function(){} );
Using the Change Event:
$(document).on("change","#selectTableLt", function() {
let clickedOption = $(this).val();
console.log(clickedOption);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectTableLt">
<option value="0">One</option>
<option value="1">Two</option>
</select>
Using the Click Event:
$(document).on("click","#selectTableLt", function() {
let clickedOption = $(this).val();
console.log(clickedOption);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectTableLt">
<option value="0">One</option>
<option value="1">Two</option>
</select>
I have a drop down list
<select name="column_select" id="column_select">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>
On clicking an option i want to display the details of the particular option in the same page.
How can this be implemented using jquery?
function showval(value)
{
var text = $("#column_select option:selected").text();
var string = "Value is: "+value+" and Text is: "+text;
$("#showvalue").html(string);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showvalue">
</div>
<select name="column_select" id="column_select" onchange="showval(this.value);">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>
It should help you.
use this jquery
jquery
$('select.column_select').on('change', function(){
var selectVal = $(this).val();
if(selectVal==col1){
// do something
};
if(selectVal==col2){
// do something
};
if(selectVal==col3){
// do something
};
});
You can subscribe to the change event for the select and perform the details display based on the current value in the select:
$("#column_select").on("change", function () {
var value = $(this).val();
// logic based on selected value
});
try this...
$(document).on('change','#column_select',function() {
// Code to write it anywhere on page.
// If you want it to write on `span#spnDisplay` then use this
var selText = $('#column_select option:selected').text();
$('#spnDisplay').text(selText)
});
i am using two dropdown list in a html file, i am using JQuery for validation.
first i need to store the selected items from both the dropdown list data to a and later i need to compare with next selection.
if both the data matches, need to generate an alert message.
<script src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("#but").click(function(){
var u=$("#hosp option:selected").val();
var v=$("#city option:selected").val();
alert(u);
alert(v);
var res =u.concat(v);
var flag=true;
});
alert(flag);
});
</script>
<div id="inner">
</div>
<select id="hosp">
<option value="nims">NIMS</option>
<option value="care">CARE</option>
<option value="app">APP</option>
<option value="osm">OSM</option>
</select><br>
<select id="city">
<option value="hyd">Hyd</option>
<option value="sec">Sec</option>
<option value="viz">Viz</option>
<option value="vij">Vij</option>
</select><br>
<input type="button" id="but" class="btn" value="CLCIK"/>
I don't really get what you want to compare, but to append the selection to a div you can use this
$(document).ready(function () {
$("#but").click(function () {
var u = $("#hosp option:selected").val();
var v = $("#city option:selected").val();
alert(u);
alert(v);
var res = u.concat(v);
var flag = true;
// Caching DOM object for better performance
$inner = $('#inner');
// Clearing the content
$inner.html('');
// Adding u to the Content of $inner
$inner.append(u);
// Adding v to the Content of $inner
$inner.append(v);
});
alert(flag);
});
JSFIDDLE
I'm not sure why this isn't working. Anyone care to take a stab?
I have a form with the below. When the user selects the "disabled" option in #frmcomments, I'd like #frmstatus to change to the option value of private.
<label for="type">Comments:</label>
<select class="sort-select" id="frmcomments" name="frmcomments">
<option value="enabled">Allow Comments</option>
<option value="disabled">No Comments</option>
</select>
<label for="type">Status:</label>
<select class="sort-select" id="frmstatus" name="frmstatus">
<option value="public">Anyone can see</option>
<option value="private">Only I can see</option>
</select>
I'm using the following jquery, but it's failing?
$('#frmcomments').change(function() {
var thistype = $(this).find(":selected").val();
if(thistype=="disabled") {
$("#frmstatus").val("private");
}
return false;
});
Check your thistype value. You should be able to call val() on the select and you shouldn't have to call .find(":selected") to get the selected list item.
$('#frmcomments').change(function() {
var thistype = $(this).val();
if(thistype=="disabled") {
$("#frmstatus").val("private").change();
}
return false;
});
var thistype = $(this).find(":selected").val();
try this
var thistype = $(this).val();