Find closest input and set value - javascript

On select value change I want find closest input by class and change value.
JS
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#doc_service').on('change', function (){
$.getJSON('\/services\/search-service', {id: $(this).val()}, function(data){
$(this).closest('.price').val(data);
//$('.price').val(data);
});
});
});
</script>
My code $(this).closest('.price').val(data); not changing value, I try $('.price').val(data); it's work, but I have many input and want change value only one closest. Structure html is table
HTML
<tr>
<td>
<select id="doc_service">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</td>
<td>
<input type="text" class="price">
</td>
</tr>
<tr>
<td>
<select id="doc_service">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</td>
<td>
<input type="text" class="price">
</td>
</tr>

this in your code doesn't refer to the changed element, you should cache the object. Also note that closest method only selects the closest matching parent element.
$('#doc_service').on('change', function (){
var _this = this;
$.getJSON('\/services\/search-service', {id: this.value }, function(data) {
$(_this).closest('td').next().find('.price').val(data);
});
});
And IDs must be unique, $('#doc_service') only selects the first matching element, here classes should be used instead.

Related

How can javascript collect values from the same classname in select-option?

I made table for the individual summation of the same classnames as like '30', '60'...
<td>
<select onchange='summation()' class='30' name='Cr'>
<option value=0>>15.0</option>
<option value=1>10.0/15.0</option>
<option value=2><5.0</option>
<option value=3>5.0/10.0</option>
</td>
<td>
<select onchange='summation()' class='30' name='WBC'>
<option value=0><2000</option>
<option value=1>2000~4000</option>
<option value=2> >10000</option>
<option value=3>4000~10000</option>
</td>
<td>
<select onchange='summation()' class='90' name='post-BUN'>
<option value=0>>24</option>
<option value=1><20</option>
<option value=2>20/24</option>
</td>
<td>
<select onchange='summation()' class='180' name='HBsAg'>
<option value=0>posi</option>
<option value=3>nega</option>
</td>
In Browser, that code's displaying below
I made javascript as below. Classname ='30' values are the collection of object.
function summation() {
var x = document.getElementsByClassName("30");
???????????
document.getElementById("30").innerHTML = x.valueOf();
How can I get the summation of the classname="30" from the that code?
When option selected, I want the sum of the values of the classname '30'. In here, 3 and 2 selected, the sum will be 5. I want That sum "5"
I think this is probably what you want, but it's a tiny bit unclear from the requirements. (I'm unsure why you run the "summation" function on the last two selects when you are not including them in the calculation.)
From a code point of view, querySelectorAll is used to find all elements with the same class. The advantage of this vs getElementsByClassName is that you can then easily loop over the items with a forEach as I have done.
Note that I had to alter your class names slightly because JavaScript complains about an invalid selector when the class name starts with a number. But this is a trivial change.
function summation() {
var x = document.querySelectorAll(".select30");
var total = 0;
x.forEach(function(item) {
total += parseInt(item.value);
});
console.log("Total: " + total);
}
<table>
<tr>
<td>
<select onchange='summation()' class='select30' name='Cr'>
<option value=0>>15.0</option>
<option value=1>10.0/15.0</option>
<option value=2><5.0</option>
<option value=3>5.0/10.0</option>
</td>
<td>
<select onchange='summation()' class='select30' name='WBC'>
<option value=0>
<2000</option>
<option value=1>2000~4000</option>
<option value=2> >10000</option>
<option value=3>4000~10000</option>
</td>
<td>
<select onchange='summation()' class='select90' name='post-BUN'>
<option value=0>>24</option>
<option value=1>
<20</option>
<option value=2>20/24</option>
</td>
<td>
<select onchange='summation()' class='select180' name='HBsAg'>
<option value=0>posi</option>
<option value=3>nega</option>
</td>
</tr>
</table>
After agreeing with ADyson and trying to do without a class name and but with data attribute here is what I have done.
const selectItems = document.querySelectorAll("select"); // selecting all select elements
selectItems.forEach(selectItem => { // looping through all select elements
selectItem.addEventListener("change", function() { // calling a function on change
let dataNumber = this.dataset.num;
summation(dataNumber); // passing the value of data-num to find next elements which has same data-num
});
});
function summation(dataNumber) {
const allElements = document.querySelectorAll("[data-num]"); // selecting all elements that has data-num attribute
const allElementsWithSameDataNumber = []; // to store all elements that has same data-num
allElements.forEach(select => {
if (select.dataset.num === dataNumber) {
allElementsWithSameDataNumber.push(select);
}
});
// Calculating the value of same data-number's select elements
let value = 0;
allElementsWithSameDataNumber.forEach(cur => {
value = parseInt(cur.value) + value;
});
console.log(value);
}
<select data-num="30" name="Cr">
<option value="10">10</option>
<option value="1">1</option>
</select>
<select data-num="30" name="WBC">
<option value="3">3</option>
<option value="2"> >2</option>
</select>
<select data-num="180" name="WBC">
<option value="3">3</option>
<option value="2"> >2</option>
</select>
<select data-num="180" name="WBC">
<option value="8">8</option>
<option value="2"> >2</option>
</select>

Chosen select - filter <optgroup > using jquery

I am using chosen drop down in asp.net. Is there a way to filter optgroup ?
There is a radio button list control with values US and UK. I want to filter drop down based on user's radio button selection. If the 'US' is selected then drop down should only show US optgroup records.
Here is the jsfiddle;
http://jsfiddle.net/7ngftsq2/
This is what i have tried so far with no luck;
('#rbDistDiv input').change(function () {
// The one that fires the event is always the
// checked one; you don't need to test for this
var ddlDist = $('#VCSdistSelect_ddlDist'),
val = $(this).val(),
region = $('option:selected', this).text();
$('span > optgroup', ddlDist).unwrap();
if (val !== '%') {
$('optgroup:not([label="' + region + '"])', ddlDist).wrap('<span/>');
}
});
You should be able to do something similar to this:
$(".chosen").chosen({
width: '600px',
allow_single_deselect: true,
search_contains: true
});
let UK_optgroup = $("#optgroup-uk").clone();
let US_optgroup = $("#optgroup-us").clone();
let CA_optgroup = $("#optgroup-ca").clone();
function filterSelect(selectedRadio) {
switch(selectedRadio) {
case "US": return US_optgroup
case "UK": return UK_optgroup
case "CA": return CA_optgroup
}
}
$('[type="radio"]').on('change', function() {
// This is only here to clear the selected item that is shown on screen
// after a selection is made. You can remove this if you like.
$("#selected-item").html("");
// Everything from here down is needed.
$("#select")
.children()
.remove('optgroup');
$("#select")
.append(filterSelect(this.value))
.trigger("chosen:updated");
});
$("#select").on('change', function(event) {
$("#selected-item").html("Selected Item: <b>" + event.target.value + "</b>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" rel="stylesheet"/>
<table id="rbDistDiv" border="0">
<tbody>
<tr>
<td><input id="rbDistDiv_0" type="radio" name="rbDistDiv" value="US"><label for="rbDistDiv_0">US</label></td>
</tr>
<tr>
<td><input id="rbDistDiv_1" type="radio" name="rbDistDiv" value="UK"><label for="rbDistDiv_1">UK</label></td>
</tr>
<tr>
<td><input id="rbDistDiv_2" type="radio" name="rbDistDiv" value="CA"><label for="rbDistDiv_2">CA</label></td>
</tr>
</tbody>
</table>
<p id="selected-item"></p>
<select id="select" class="chosen">
<option value="" disabled selected>Select your option</option>
<optgroup id="optgroup-uk" label="UK">
<option value="Adrian">Adrian</option>
<option value="Alan">Alan</option>
<option value="Alan B">Alan B</option>
</optgroup>
<optgroup id="optgroup-us" label="US">
<option value="John">John</option>
<option value="Billy">Billy</option>
<option value="Chris">Chris</option>
</optgroup>
<optgroup id="optgroup-ca" label="CA">
<option value="Gabrielle">Gabrielle</option>
<option value="Maude">Maude</option>
<option value="Morgan">Morgan</option>
</optgroup>
</select>
Just hide/show them by the label when an change is made to the radio button.
$('[type="radio"]').on('change', function () {
$('select')
.val('') // reset value if selection already made
.find('optgroup') // find the groups
.hide() // hide them all
.filter('[label="' + this.value + '"]') // find the one that matches radio
.show() // show it
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="rbDistDiv" border="0">
<tbody><tr>
<td><input id="rbDistDiv_0" type="radio" name="rbDistDiv" value="US"><label for="rbDistDiv_0">US</label></td>
</tr><tr>
<td><input id="rbDistDiv_1" type="radio" name="rbDistDiv" value="UK"><label for="rbDistDiv_1">UK</label></td>
</tr>
</tbody></table>
<br>
<select name="VCSdistSelect$ddlDist" id="VCSdistSelect_ddlDist" class="chosen-select" data-placeholder="Select a Distributor" >
<option selected="selected" value=""></option>
<optgroup label="US">
<option value="123" division="US">Aaron</option>
</optgroup>
<optgroup label="UK">
<option value="655" division="UK">John</option>
</optgroup>
</select>

Select option value based on another select option in dynamic table

I have a table that changes the number of rows
<html>
<head>
<title>no Title</title>
<script type="text/javascript">
//what to do?
</script>
</head>
<body>
<datalist>
//land
//water
//air
//what to do?
</datalist>
<table id="animal">
<tr>
<th>Animal Category</th>
<th>Select Animal</th>
</tr>
<tr>
<td>
<select>
<option selected>Please select</option>
<option value="land">Land</option>
<option value="air">Air</option>
<option value="water">Water</option>
</select>
</td>
<td>
<select>
<option selected>Please select</option>
//what to do?
</select>
</td>
</tr>
<tr>
<td>
<select>
<option selected>Please select</option>
<option value="land">Land</option>
<option value="air">Air</option>
<option value="water">Water</option>
</select>
</td>
<td>
<select>
<option selected>Please select</option>
//what to do?
</select>
</td>
</tr>
</table>
<script src="myProject/js/jquery.min.js"></script>
</body>
</html>
Let's say there are currently 2 rows, then in each row, there is 'Select Animal' which can be selected according to the 'Animal Category' option.
For example, I chose 'land' in 'Animal category' then what appears in 'Select Animal' is -> cat, dog, chicken
For example I have 3 lists (land, air, water)
land -> cat, dog, chicken, etc
water -> fish, octopus, shrimp, etc
air -> bird, etc
Every list I want to place in the datalist because it can change in number, I've download jquery library. where do I start ?
The easiest way is to make just two selects and add some classes on it.
Then filter by classes or attributes. I've done by class on this example.
document.getElementById("main_select").onchange = function(){
let selector = document.getElementById('main_select');
let value = selector[selector.selectedIndex].value;
let nodeList = document.getElementById("sub_select").querySelectorAll("option");
nodeList.forEach(function(option){
if(option.classList.contains(value)){
option.style.display="block";
}else{
option.style.display="none";
}
});
}
<html>
<head>
<title>no Title</title>
</head>
<body>
<table id="animal">
<tr>
<td>
<select id="main_select">
<option selected>Please select</option>
<option value="land">Land</option>
<option value="air">Air</option>
<option value="water">Water</option>
</select>
</td>
<td>
<select id="sub_select">
<option selected>Please select</option>
<option class="land" value="cat">cat</option>
<option class="land" value="dog">dog</option>
<option class="land" value="chicken">chicken</option>
<option class="water" value="fish">fish</option>
<option class="water" value="octopus">octopus</option>
</select>
</td>
</tr>
</table>
Store your animals inside an Object literal
And than you could do like:
const categories = {
land: ["cat", "dog", "chicken"],
water: ["fish", "octopus", "shrimp"],
air: ["bird", "dragon"]
};
const options = Object.keys( categories ).map(pr => `<option value="${pr}">${pr}</option>`);
$("[data-target]").append( options ).on('change', function() {
const $targ = $(this.dataset.target).prop("disabled", false);
$targ.find("option:not(:disabled)").remove(); // Remove all but first option
$targ.append(categories[this.value].map(val => `<option value="${val}">${val}</option>`)); // Append new options
});
select {text-transform: capitalize;}
<select data-target="#anim"><option selected disabled>Select Category</option></select>
<select id="anim" disabled><option selected disabled>Select animal</option></select>
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>

Dropdown box - onchange and onselect

I want help, i am very new to html..
On selecting option from dropdown menu, I want html to put the values in word..
e.g. When I select "1" from drop down, it must show "one"
When I select "2' from drop down, it must show "two"
How to do that??
<HTML>
<Table border=10>
<TR>
<TD>Select Number</TD>
<TD><Select>
<option>1</option>
<option>2</option>
<option>3</option>
</Select></TD>
</TR>
<tr>
<td>In Words</td>
<td><input type="text" readonly></td>
</tr>
</Table>
</HTML>
Please make a script and show me...
A non-jQuery solution:
Firstly, give your select- and input-tags id's, and your options values (value=""). Then add a onchange=""-listener in the select-tag and make a function that carries out what you want to do (i.e. checking the selected value and displaying it in your input field), like so:
function showValue() {
var x = document.getElementById("mySelect").value;
document.getElementById("mySelection").value = "You selected: " + x;
}
<Table border=10>
<tr>
<td>Select Number</td>
<td><Select onchange="showValue()" id="mySelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</Select></td>
</tr>
<tr>
<td>In Words</td>
<td><input type="text" id="mySelection"></td>
</tr>
</Table>
If I understand what you want, you'll need some javascript to find what you selected, and take that 'string' and shove it in an element for the user to see.
Here is a working example. Try making one these next time you ask a question. Welcome to Stack Overflow.
http://jsfiddle.net/sheriffderek/6vp5Lskn/
HTML
<select name='my_select' id='my_select'>
<option value='1'>Option 1</option>
<option value='2'>Option 2</option>
<option value='3'>Option 3</option>
<option value='4'>Option 4</option>
<option value='5'>Option 5</option>
</select>
<div id="outcome">
You have selected: <span></span>
</div>
javascript (jQuery)
var selectedOption; // define this variable
// when the select is changed...
$('#my_select').on('change', function() {
// get the option that was selected
selectedOption = $( "#my_select option:selected" ).text();
// put the option in the place you want it
$('#outcome span').html(selectedOption);
});

How to pass parameters on onChange of html select

I am a novice at JavaScript and jQuery. I want to show one combobox-A, which is an HTML <select> with its selected id and contents at the other place on onChange().
How can I pass the complete combobox with its select id, and how can I pass other parameters on fire of the onChange event?
function getComboA(selectObject) {
var value = selectObject.value;
console.log(value);
}
<select id="comboA" onchange="getComboA(this)">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
The above example gets you the selected value of combo box on OnChange event.
Another approach wich can be handy in some situations, is passing the value of the selected <option /> directly to the function like this:
function myFunction(chosen) {
console.log(chosen);
}
<select onChange="myFunction(this.options[this.selectedIndex].value)">
<option value="1">Text 1</option>
<option value="2">Text 2</option>
</select>
For how to do it in jQuery:
<select id="yourid">
<option value="Value 1">Text 1</option>
<option value="Value 2">Text 2</option>
</select>
<script src="jquery.js"></script>
<script>
$('#yourid').change(function() {
alert('The option with value ' + $(this).val() + ' and text ' + $(this).text() + ' was selected.');
});
</script>
You should also know that Javascript and jQuery are not identical. jQuery is valid JavaScript code, but not all JavaScript is jQuery. You should look up the differences and make sure you are using the appropriate one.
JavaScript Solution
<select id="comboA">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
<script>
document.getElementById("comboA").onchange = function(){
var value = document.getElementById("comboA").value;
};
</script>
or
<script>
document.getElementById("comboA").onchange = function(evt){
var value = evt.target.value;
};
</script>
or
<script>
document.getElementById("comboA").onchange = handleChange;
function handleChange(evt){
var value = evt.target.value;
};
</script>
I found #Piyush's answer helpful, and just to add to it, if you programatically create a select, then there is an important way to get this behavior that may not be obvious. Let's say you have a function and you create a new select:
var changeitem = function (sel) {
console.log(sel.selectedIndex);
}
var newSelect = document.createElement('select');
newSelect.id = 'newselect';
The normal behavior may be to say
newSelect.onchange = changeitem;
But this does not really allow you to specify that argument passed in, so instead you may do this:
newSelect.setAttribute('onchange', 'changeitem(this)');
And you are able to set the parameter. If you do it the first way, then the argument you'll get to your onchange function will be browser dependent. The second way seems to work cross-browser just fine.
jQuery solution
How do I get the text value of a selected option
Select elements typically have two values that you want to access.
First there's the value to be sent to the server, which is easy:
$( "#myselect" ).val();
// => 1
The second is the text value of the select.
For example, using the following select box:
<select id="myselect">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>
If you wanted to get the string "Mr" if the first option was selected (instead of just "1") you would do that in the following way:
$( "#myselect option:selected" ).text();
// => "Mr"
See also
.val() jQuery API Documentation
This is helped for me.
For select:
$('select_tags').on('change', function() {
alert( $(this).find(":selected").val() );
});
For radio/checkbox:
$('radio_tags').on('change', function() {
alert( $(this).find(":checked").val() );
});
You can try bellow code
<select onchange="myfunction($(this).val())" id="myId">
</select>
Html template:
<select class="staff-select">
<option value="">All</option>
<option value="196">Ivan</option>
<option value="195">Jon</option>
</select>
Js code:
const $staffSelect = document.querySelector('.staff-select')
$staffSelect.onchange = function () {
console.log(this.value)
}
Just in case someone is looking for a React solution without having to download addition dependancies you could write:
<select onChange={this.changed(this)}>
<option value="Apple">Apple</option>
<option value="Android">Android</option>
</select>
changed(){
return e => {
console.log(e.target.value)
}
}
Make sure to bind the changed() function in the constructor like:
this.changed = this.changed.bind(this);
this code once i write for just explain onChange event of select you can save this code as html and see output it works.and easy to understand for you.
<html>
<head>
<title>Register</title>
</head>
<body>
<script>
function show(){
var option = document.getElementById("category").value;
if(option == "Student")
{
document.getElementById("enroll1").style.display="block";
}
if(option == "Parents")
{
document.getElementById("enroll1").style.display="none";
}
if(option == "Guardians")
{
document.getElementById("enroll1").style.display="none";
}
}
</script>
<form action="#" method="post">
<table>
<tr>
<td><label>Name </label></td>
<td><input type="text" id="name" size=20 maxlength=20 value=""></td>
</tr>
<tr style="display:block;" id="enroll1">
<td><label>Enrollment No. </label></td>
<td><input type="number" id="enroll" style="display:block;" size=20 maxlength=12 value=""></td>
</tr>
<tr>
<td><label>Email </label></td>
<td><input type="email" id="emailadd" size=20 maxlength=25 value=""></td>
</tr>
<tr>
<td><label>Mobile No. </label></td>
<td><input type="number" id="mobile" size=20 maxlength=10 value=""></td>
</tr>
<tr>
<td><label>Address</label></td>
<td><textarea rows="2" cols="20"></textarea></td>
</tr>
<tr >
<td><label>Category</label></td>
<td><select id="category" onchange="show()"> <!--onchange show methos is call-->
<option value="Student">Student</option>
<option value="Parents">Parents</option>
<option value="Guardians">Guardians</option>
</select>
</td>
</tr>
</table><br/>
<input type="submit" value="Sign Up">
</form>
</body>
</html>
function setMyValue(v) {
console.log(v);
}
<select onchange="setMyValue(this.value)">
<option value="a">1</option>
<option value="b">2</option>
<option value="c">3</option>
</select>
This worked for me onchange = setLocation($(this).val())
Here.
#Html.DropDownList("Demo",
new SelectList(ViewBag.locs, "Value", "Text"),
new { Class = "ddlStyle", onchange = "setLocation($(this).val())" });
Simply:
function retrieve(){
alert(document.getElementById('SMS_recipient').options[document.getElementById('SMS_recipient').selectedIndex].text);
}
function retrieve_other() {
alert(myForm.SMS_recipient.options[document.getElementById('SMS_recipient').selectedIndex].text);
}
function retrieve() { alert(document.getElementById('SMS_recipient').options[document.getElementById('SMS_recipient').selectedIndex].text);
}
<HTML>
<BODY>
<p>RETRIEVING TEXT IN OPTION OF SELECT </p>
<form name="myForm" action="">
<P>Select:
<select id="SMS_recipient">
<options value='+15121234567'>Andrew</option>
<options value='+15121234568'>Klaus</option>
</select>
</p>
<p>
<!-- Note: Despite the script engine complaining about it the code works!-->
<input type="button" onclick="retrieve()" value="Try it" />
<input type="button" onclick="retrieve_other()" value="Try Form" />
</p>
</form>
</HTML>
</BODY>
Output:
Klaus or Andrew depending on what the selectedIndex is. If you are after the value just replace .text with value. However if it is just the value you are after (not the text in the option) then use document.getElementById('SMS_recipient').value
//html code
<select onchange="get(this)">
<option value="a">1</option>
<option value="b">2</option>
<option value="c">3</option>
</select>
//javscript code
function get(select) {
let value = select.value;
console.log(value);
}

Categories