Consider this:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
$("select").change(function(){
var val = $(this).val();
var text = $(this).text();
// That's fine
alert(val);
// But it's not. It alerts both Value 1 and Value 2
alert(text);
});
});
</script>
</head>
<body>
<select>
<option value="val_1">Value 1</option>
<option value="val_2">Value 2</option>
</select>
</body>
</html>
When onchange event occurs, then it alerts the right value of target option element (val_1 or val_2). That's fine.
But the problem with options's text. That should alert either Value 1 or Value 2, but not both! So what's the problem? Why it alerts both values, when only one target option element is processed?
$(function(){
$("select").change(function(){
var val = $(this).val();
var text = $(this).text();
// That's fine
alert(val);
// But it's not. It alerts both Value 1 and Value 2
alert(text);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<select>
<option value="val_1">Value 1</option>
<option value="val_2">Value 2</option>
</select>
</body>
</html>
In your change event, this refers to the <select> element, not the selected <option>, therefore calling .text() on a select, will show all options.
To get the selected option text:
var text = $(this).find("option:selected").text();
$(function(){
$("select").change(function(){
var val = $(this).val();
var text = $(this).find("option:selected").text();
// That's fine
alert(val);
// But it's not. It alerts both Value 1 and Value 2
alert(text);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<select>
<option value="val_1">Value 1</option>
<option value="val_2">Value 2</option>
</select>
</body>
</html>
Related
I have drop down list which contain some values which is retrieved from database table, what I want is when click on button it should get only middle values of option tag but only those option tag whose class name is 'get_this' and leave those option if they don't have this class
Expected output:
value 1
value 3
value 4
<!DOCTYPE html>
<html>
<body>
<select id="selectBox">
<option class="get_this">text1 value 1 text1 </option>
<option >text2 value 2 text2</option>
<option class="get_this">text3 value 3 text3</option>
<option class="get_this">text4 value 4 text4</option>
</select>
<input type="submit" value="Get all options" class="get_options"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
var array_values = [];
$(".get_options").click( function (){
var values = $.map($('#selectBox option'), function(ele) {
array_values.push(ele.value);
});
console.log(array_values);
});
</script>
</body>
</html>
When value of an <option> tag needs to differ from its text content, you may want to specify a value attribute.
<!DOCTYPE html>
<html>
<body>
<select id="selectBox">
<option class="get_this" value="value 1">text1 value 1 text1 </option>
<option value="value 2">text2 value 2 text2</option>
<option class="get_this" value="value 3">text3 value 3 text3</option>
<option class="get_this" value="value 4">text4 value 4 text4</option>
</select>
<input type="submit" value="Get all options" class="get_options"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
var array_values = [];
$(".get_options").click( function (){
var values = $.map($('#selectBox option.get_this'), function(ele) {
array_values.push(ele.value);
});
console.log(array_values);
});
</script>
</body>
</html>
Set the .on('click'... method on button.
On .each() .get_this extract text with .text()
Then split() the text string on every two consecutive spaces (you shouldn't use so many spaces it becomes problematic)
We are left with an array from each .get_this.
Extract the second string from each array by referencing index 1: array[1]
Finally push each string into an empty array.
Demo
$('.get_options').on('click', function(e) {
var result = [];
$('.get_this').each(function() {
var text = $(this).text();
var array = text.split(/\s{2,}/);
result.push(`${array[1]}`);
});
console.log(result);
});
<!DOCTYPE html>
<html>
<body>
<select id="selectBox">
<option class="get_this">text1 value 1 text1 </option>
<option>text2 value 2 text2</option>
<option class="get_this">text3 value 3 text3</option>
<option class="get_this">text4 value 4 text4</option>
</select>
<input type="submit" value="Get all options" class="get_options" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
</script>
</body>
</html>
I have 2 comboboxes, first for Province and second for city/town.
I just wanna get the value of my second combobox (city/town) after first combobox changed and second combobox will change with ajax after user chose first the combobox.
Here is my code, but the problem is that the alert shows up twice!
jQuery('#billing_state').on('change', function() {
jQuery('#billing_city').on('change', function() {
var state = jQuery(this).val();
alert(state);
});
});
Why you made an imbrication of event ? just use change on the first combo .
Here is an example :
state = {"1":["Rome","Milan","Parma"],"2":["Paris","Lile","Nice"],"3":["Algiers","Jijel","Bejaia"],"4":["London","Manchester"]}
$(document).ready(function(){
//this if you want that changing province this alert country value
$("#billing_state").on("change",function(e){
$("#billing_town").children().remove();
var city =state[$(this).val()];
if(!city) return;
$("#billing_town").append('<option value="">- Select -</option>')
for(i=0; i< city.length;i++) {
//console.log(city[i]);
$("#billing_town").append('<option value="'+city[i]+'">'+city[i]+'</option>');
}
});
// when changing country this alert country value itself
$("#billing_town").on("change",function(e){
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Province :
<select id="billing_state">
<option value="">- select -</option>
<option value="1">Italy</option>
<option value="2">France</option>
<option value="3">Algeria</option>
<option value="4">UK</option>
</select>
<br><br>
Country :
<select id="billing_town">
</select>
is this what you want. try with demo below
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
<label>Province</label>
<select id="province">
<option>california</option>
<option>austin</option>
<option>texas</option>
<option>colombo</option>
</select>
<hr>
<label>city</label>
<select id="city">
<option>colombo</option>
<option>canberra</option>
<option>silicon valley</option>
<option>ottawa</option>
</select>
</body>
<script type="text/javascript">
$("#province").on('change',function(){// in this line identify if there is any changes to first select box
var thevalue = $("#city").val(); // if there is any changes to first selection box, then at that time get the value of second selection box.
alert(thevalue); // to check the value of secod check box at the time chage put an alert.
});
</script>
</html>
or else if your want to show values according to user selection of first select box value, you can do it like this.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
<label>Province</label>
<select id="province">
<option>california</option>
<option>austin</option>
<option>ottawa</option>
<option>western</option>
</select>
<hr>
<label>City</label>
<select id="city">
<option>--select--</option>
</select>
</body>
<script type="text/javascript">
$("#province").on('change',function(){// in this line identify if there is any changes to first select box
var thevalue = $(this).val(); // if there is any changes to first selection box, then at that time get the
$("#city").text("");
//display values according to the first value
if (thevalue == "california")
{
var cities = ["sillicon valley","st pauls","new york"];
for(var i=0;i<cities.length;i++)
{
var createoption = $('<option>'+cities[i]+'</option>');
$("#city").append(createoption);
}
}
else if(thevalue="austin")
{
var cities = ["mirage","manhatten","las vegas"];
for(var i=0;i<cities.length;i++)
{
var createoption = $('<option>'+cities[i]+'</option>');
$("#city").append(createoption);
}
}
else
{
//like above you can add relevent values.
}
});
</script>
</html>
I'm going to create a dropdown list that contains four values (One, Two, Three, Four). When user chooses (One, Two or Three), the textbox below the dropdown list must allow user to type any text in it; but when user chooses Four, textbox should be disabled.
Here is my code
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
var $inputs = $('#myclass');
$('#select').change(function(){
$inputs.prop('disabled', $(this).val() === '4');
});
</script>
<title>Choose one</title>
</head>
<body>
<select id="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
<input type="text" id="myclass"/>
</body>
</html>
The code above is not working. Can anyone help me to solve this problem?
The DOM isn't ready :
$(function() {
$('#select').on('change', function(){
$('#myclass').prop('disabled', this.value == '4');
});
});
Your JavaScript code is being executed before the DOM is rendered.
Quick fix: place your JavaScript code at the end of the <body> tag. Like this:
<!DOCTYPE html>
<html>
<head>
<title>Choose one</title>
</head>
<body>
<select id="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
<input type="text" id="myclass"/>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
var $inputs = $('#myclass');
$('#select').change(function(){
$inputs.prop('disabled', $(this).val() === '4');
});
</script>
</body>
</html>
Another option is making JavaScript code to be executed when document is ready, but the "Quick fix" approach is quite popular nowadays. This would be the different (classical?) approach:
<script>
$(document).ready(function () {
var $inputs = $('#myclass');
$('#select').change(function(){
$inputs.prop('disabled', $(this).val() === '4');
});
});
</script>
I want to remove the click event from select list and from jQuery date picker.
Say if a select box contains 3 values
(Select, Yes, No) No is selected when the form is loaded then the user must not be able to change it until a satisfying condition is met.
Once the condition is met also I want to restore the selection of any option.
<html>
<head>
<title> Javascript Test </title>
<script src="jquery.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#b1").data("isOn","Remove");
});
$(document).ready(function(){
$("#b1").click(function(){
var i=0;
//alert("hi");
if($(this).data("isOn")=="Add"){
alert($(this).data("isOn"));
$(this).data("isOn",'Remove');
$("#car").on('click');
//return false;
}
else if($(this).data("isOn")=="Remove"){
alert($(this).data("isOn"));
$("#car").off("click");
$(this).data("isOn",'Add');
//return false;
}
alert(i);
i++;
});
});
</script>
</head>
<body>
<select name="carlist" form="carform" id="car">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type = "button" value="Add/Remove" id="b1"/>
</body>
</html>
My ultimate goal with this is to make a dropdown that allows user input also. The best I can seem to do is an textbox next a dropdown that makes it look like they are similar, the issue I am running into is that I need the textbox to update whenever my dropdown value is changed. I have some code I've been playing with (below), but it doesn't seem to be getting me anywhere! Any pointers on how I can get this to work, or am I messing up the syntax? (fairly new to both jscript and html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<style type="text/css">
select
{
width:200px;
}
</style>
<head>
<title>Test</title>
<script type="text/JavaScript">
var select = document.getElementById('theItems');
var input = document.getElementById('stroke');
function otherSelect()
{
input.value = select.value;
}
</script>
</head>
<body>
<form action="" method="">
<input name="stroke"/>
<select name="theItems" onchange="otherSelect()">
<option value="item1">Item One</option>
<option value="item2">Item Two</option>
<option value="item3">Item Three</option>
<option value="item3">Item Four</option>
<option value="other">Other</option>
</select>
<div id="otherBox" style="visibility: hidden;">
If other: <input name="otherField" type="text" />
</div>
</form>
</body>
You should execute your script in the window.onload event. The elements are not available to your script when it is being executed. Change your script to this
<script type="text/JavaScript">
window.onload = function(){
var select = document.getElementById('theItems');
var input = document.getElementById('stroke');
function otherSelect()
{
input.value = select.value;
}
}
</script>
This way the script will be executed after the HTML elements have been rendered by the browser.
Here's a simple pure JavaScript implementation of what you want. http://jsfiddle.net/24Xhn/
We're going to setup the markup so the select box and the other input box have similar name and id attributes. We'll use classes to setup/initialize the onchange events and make sure the inputs start off hidden and disabled. By toggling the "disabled" attribute, true or false we are making it so the input or select don't show up when the form is submitted, submit the form in the JSFiddle with different combinations and you'll see the output in the query string of the URL.
HTML
<select id="items1" name="items1" class="select-other">
<option value="item1">Item One</option>
<option value="item2">Item Two</option>
<option value="item3">Item Three</option>
<option value="item3">Item Four</option>
<option value="other">Other</option>
</select>
<input id="items1-other" name="items1-other" class="input-other" />
JS
// setup
var inps = document.getElementsByClassName("input-other");
for(var i=0; i<inps.length; i++) {
var inp = inps[i];
// hide & disable the "other" input
inp.style.display = "none";
inp.disabled = true;
// set onchange, if input is empty go back to select
inp.onchange = function() {
var val = this.value;
if(val == "") {
this.style.display = "none";
this.disabled = true;
// get its associated select box
var sel = document.getElementById(this.id.replace(/-other$/i, ""));
sel.style.display = "";
sel.disabled = false;
}
};
}
var sels = document.getElementsByClassName("select-other");
for(var i=0; i<sels.length; i++) {
var sel = sels[i];
// set onchange if value is other switch to input
sel.onchange = function() {
var val = this.value;
if(val == "other") {
this.style.display = "none";
this.disabled = true;
// get associated input box
var inp = document.getElementById(this.id + "-other");
inp.style.display = "";
inp.disabled = false;
}
};
}
I just realized what was wrong. I didn't truly look at the html until I copied and pasted it into a test application and I figured out the issue.
You need to set the id tag to the stroke and theItems not the name tag. That's why it's not doing anything. There was, I'm guessing, a copy/paste issue as well because you didn't have a closing html tag, but I assumed you just missed copying that. Also, you don't really need global variables in order to retrieve the input and select you just need them inside the actual function, and you can actually pass the select into the function like so.
Your code corrected:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
select
{
width:200px;
}
</style>
<script type="text/javascript">
function otherSelect(obj)
{
var input = document.getElementById('stroke');
input.value = obj.value;
}
</script>
</head>
<body>
<form action="" method="">
<input id="stroke" name="stroke"/>
<select id="theItems" name="theItems" onchange="otherSelect(this)">
<option value="item1">Item One</option>
<option value="item2">Item Two</option>
<option value="item3">Item Three</option>
<option value="item3">Item Four</option>
<option value="other">Other</option>
</select>
<div id="otherBox" style="visibility: hidden;">
If other: <input name="otherField" type="text" />
</div>
</form>
</body>
</html>
I also wanted to create a combobox with an auto-updating text field next to it for new entries, and came up with this in less than an hour, based on simple html and javascript examples from w3schools.com. It works perfectly on my IE browser.
<!DOCTYPE html>
<html>
<head>
<script>
function updateField(name, value)
{
document.getElementById(name).value = value;
}
</script>
</head>
<body>
<select name='10' onchange='updateField(this.name, this.value)'>
<option value='volvo'>Volvo</option>
<option value='saab'>Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="text" id="10" value="volvo">
</body>
</html>