Get all options middle value only,with selected(desired) class using jquery - javascript

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>

Related

How to get second combobox value after first one changed (jquery)

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>

select value with space jquery

<!DOCTYPE html>
<html>
<body>
<form>
Select your favorite fruit:
<select id="mySelect">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
</form>
<p>Click the button to change the selected fruit to banana.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("mySelect").value = "banana";
}
</script>
</body>
</html>
This is from here setting value of select option on button click. When button is clicked the value will be banana when i change the value of banana with banana 1 it is not showing anymore.How to make it in a way that it will still accept the value even if there is a space
Also if you are checking for banana 1 there should be a value called banana 1 so it gets the value . Otherwise it will just give a blank dropdown as it cant find that value.
For checking for banana 1 you will have to change the function's checking value
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#make_ora").click(function () {
$("#mySelect").val("banana 1");
});
});
</script>
</head><body>
Select your favorite fruit:
<select id="mySelect" class ="mys">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana 1">Banana 1</option>
</select>
<br/>
<br/>
<br/>
<input type='button' value='Change to banana 1' id='make_ora'>
</body>
</html>
Setting value of Selection tag will reflect only if any one of options value matches with set value. If you want to set value as "banana 1" it should have Banana.
Use This:-
var c=document.getElementById("mySelect");
c.value="banana 1";
alert(c.value);/* Only For Check*/
<script>
<option value="banana 1">Banana 1</option>
function myFunction() {
document.getElementById("mySelect").value = "banana 1";
}
</script>
First do above change in your w3schools editor
Then click on "See Result"
Then click on "Try it"
It should work
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
From among the option values there is no "banana1" in the select option value.so thats why it is not appearing .
instead of choose other option values like---orange (or)pineapple..
its working.

getting variable from drop down list

I am banging my head against a wall here. Below, you will find the code I am working with, and I am trying to set a variable by using a drop down list. I have tried everything I can think of, and I know this is simple. However, I am missing something. A nudge in the right direction would be appreciated. I keep getting an alert of "null" on the first two variables, but the third one comes through alright.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Homework 4 - Taxi Fare Calculator</title>
<script src="scripts.js"></script>
</head>
<body bgcolor="#f0ffff">
<h2>Taxi Fare Calculator by Christopher Lewis</h2>
This calculator will look at a starting zone, ending zone, and total time of a drive.
In the end, it calculates the fare.
<h3>Please Choose Starting Zone:</h3>
<select name="start">
<option value ="1">Zone 1</option>
<option value ="2">Zone 2</option>
<option value ="3">Zone 3</option>
</select>
<h3>Please Choose Destination Zone:</h3>
<select name="ending">
<option value = "1">Zone 1</option>
<option value = "2">Zone 2</option>
<option value = "3">Zone 3</option>
</select>
<h3>Please enter total time of ride:</h3>
<input type="text" id="totalTime" size="5">
<p>
<input type="button" id="button" value="Fare total" onclick="calculate()"
</body>
</html>
function calculate(){
var startZone = document.getElementById("start");
var endingZone = document.getElementById("ending");
var time = parseFloat(document.getElementById("totalTime").value);
alert(startZone);
alert(endingZone);
alert(time);
}
The reason why 'startZone' and 'endingZone' are returning 'null' is because you are querying a DOM element with IDs start and ending. There are no elements on the page with such IDs so document.getElementById returns null.
I edited your code. I added ID attribute to the <select> elements
<select name="start" id="start">
<option value ="1">Zone 1</option>
<option value ="2">Zone 2</option>
<option value ="3">Zone 3</option>
</select>
<select name="ending" id="ending">
<option value = "1">Zone 1</option>
<option value = "2">Zone 2</option>
<option value = "3">Zone 3</option>
</select>
Your selects have name instead of id set, so you won't find them with getElementById.
You can still get a return value from a "select" element, I made a simple JavaScript example to do this:
But you are trying to select the element by the id, which you are mistaking for the name attribute, in my example I left in the name attributes but added id attributes to select the element by Id via JavaScript
HTML
<select name="start" id="zone">
<option value ="1">Zone 1</option>
<option value ="2">Zone 2</option>
<option value ="3">Zone 3</option>
</select>
<br>The selected value is: <span id='return'>none</span>
JavaScript
document.getElementById("zone").onchange=function(){
document.getElementById("return").innerHTML=document.getElementById("zone").value;
}
Here is a JSFiddle example
First of all, you didn't set an id for the select elements. Secondly, you also need to get the selected value of a select box with javascript like this:
document.getElementById('select-id').options[document.getElementById('select-id').selectedIndex].text;
Here is the correct code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Homework 4 - Taxi Fare Calculator</title>
<script src="scripts.js"></script>
</head>
<body bgcolor="#f0ffff">
<h2>Taxi Fare Calculator by Christopher Lewis</h2>
This calculator will look at a starting zone, ending zone, and total time of a drive.
In the end, it calculates the fare.
<h3>Please Choose Starting Zone:</h3>
<select id="start" name="start">
<option value ="1">Zone 1</option>
<option value ="2">Zone 2</option>
<option value ="3">Zone 3</option>
</select>
<h3>Please Choose Destination Zone:</h3>
<select id="ending" name="ending">
<option value = "1">Zone 1</option>
<option value = "2">Zone 2</option>
<option value = "3">Zone 3</option>
</select>
<h3>Please enter total time of ride:</h3>
<input type="text" id="totalTime" size="5">
<input type="button" id="button" value="Fare total" onclick="calculate()" />
</body></html>
Javascript
function calculate(){
var startZone = document.getElementById('start').options[document.getElementById('start').selectedIndex].text;
var endingZone = document.getElementById('ending').options[document.getElementById('ending').selectedIndex].text;
var time = parseFloat(document.getElementById("totalTime").value);
alert(startZone);
alert(endingZone);
alert(time);
}
demo: http://jsfiddle.net/zUa7S/1/
if you want to query element by name then this might work:
var startZone = document.getElementsByName("start")[0].value;
var endingZone = document.getElementsByName("ending")[0].value;
since getElementsByName returns collection whereas getElementById returns an object.

More Properties of Dropdown options

I've got a dropdown setup going on in which the user enters an input value, chooses a calculation to perform on that number from a dropdown, then a function displays the result.
What I would like is to add more 'values' to the dropdown, so when an option is selected from the list, it can also, say, display some text stored in the list, or some other information. Right now I can return the selected option's value (.value) and use the option's name (.text) to perform functions, but is there any more data I can add to each selection to be used later?
<html>
<head>
<script language="JavaScript">
function myfunction(form)
{
var i = parseFloat(form.Input.value, 10);
var e = document.getElementById("calculationList");
var strUser = e.options[e.selectedIndex].value;
form.Output.value = strUser*i;
}
</script>
</head>
<body>
<form>
Input Number:
<INPUT NAME="Input" SIZE=15>
Make a selection:
<select id="calculationList" onchange="myfunction(form)">
<option></option>
<option value="2">Double It</option>
<option value="3">Triple It</option>
<option value="10">Multiply It By ten</option>
</select>
Output Number:
<INPUT NAME="Output" SIZE=15>
</FORM>
</body>
</html>
Basically you may attach data attribute to your options like that:
<select id="calculationList">
<option></option>
<option value="2" data-aaa="10">Double It</option>
<option value="3" data-aaa="20">Triple It</option>
<option value="10" data-aaa="30">Multiply It By ten</option>
</select>
And later get the content of the attribute:
var dropdown = document.getElementById("calculationList");
dropdown.addEventListener("change", function() {
console.log(dropdown.options[dropdown.selectedIndex].getAttribute("data-aaa"));
});
jsfiddle -> http://jsfiddle.net/pzKrr/
Edit:
If you want to implement my solution remove onchange="myfunction(form)" from the select tag. After that add the following code just after that myfunction
window.onload = function() {
var dropdown = document.getElementById("calculationList");
dropdown.addEventListener("change", function() {
console.log(dropdown.options[dropdown.selectedIndex].getAttribute("data-aaa"));
});
};

How to pass the selected value to java script function inside of select tag in html?

<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>
Hi i need to pass the selected value immediately on inside of this select tag so pls some one help me
Not that I agree with how you're doing things here (in side the tag), technically it is possible to do what you ask by the following:
<form>
<SELECT NAME="sel" onChange="split(this.value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
You cannot pass the value directly to the handler but you can get the values in it, I'd recommend to do this in code and not use inline event handlers:
var select = document.forms[0].sel;
select.onchange = function(){
var value = select.options[select.selectedIndex].value; // to get Value
var text = select.options[select.selectedIndex].text; // to get Text
}
Here's a working example:
http://jsfiddle.net/c2SrV/
<html>
<head>
<script>
function split(value)
{
alert(value);
}
</script>
</head>
<body>
<form>
<SELECT NAME="sel" onChange="split(value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
<body>
</html>
use "value". hope this was helpful
this.options[this.selectedIndex].value
*assuming you want to put it inline inside the onchange attribute

Categories