jquery checking if the selected element is the current of each member

jquery checking if the selected element is the current of each member - javascript

I have many select options lists <select> and on change of one of them I want to apply some action to the others except the current one i.e the active list that triggered change event. I follow code like the following:
<select class="ops">
<option>Select</option>
<option value="1">One</otption>
<option value="2">Two</otption>
<option value="3">Three</otption>
<option value="4">Four</otption>
</select>
<select class="ops">
<option>Select</option>
<option value="1">One</otption>
<option value="2">Two</otption>
<option value="3">Three</otption>
<option value="4">Four</otption>
</select>
<select class="ops">
<option>Select</option>
<option value="1">One</otption>
<option value="2">Two</otption>
<option value="3">Three</otption>
<option value="4">Four</otption>
</select>
<select class="ops">
<option>Select</option>
<option value="1">One</otption>
<option value="2">Two</otption>
<option value="3">Three</otption>
<option value="4">Four</otption>
</select>
<script>
$(document).ready(function(){
var basicObj;
$("select.ops").change(function(){
basicObj = $(this);
$("select.ops").each(function(){
if ($(this) !== basicObj){
// do something
$(this).css('color','red');
}
})
})
})
</script>
The problem here is if ($(this) !== basicObj) always evaluated as true so, for example, when the first select list changed, its color changed to red too! this code demo

Reason why not working :
Note that jQuery selectors return the Jquery collection of selected objects, mean that they never be equal in the sense of reference equality.
To compare Jquery objects, is() function
Description: Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.
To check jquery objects equals you should have tried !$(this).is(basicObj)
<script>
$(document).ready(function(){
$("select").change(function(){
var basicObj = $(this);
$("select").each(function(sel){
debugger;
if (!$(this).is(basicObj)){
// do something
$(this).css('color','red');
}
})
})
})
</script>
Demo

Related

Select dropdown value by index using JQuery [duplicate]

If you know the Index, Value or Text. also if you don't have an ID for a direct reference.
This, this and this are all helpful answers.
Example markup
<div class="selDiv">
<select class="opts">
<option selected value="DEFAULT">Default</option>
<option value="SEL1">Selection 1</option>
<option value="SEL2">Selection 2</option>
</select>
</div>

A selector to get the middle option-element by value is
$('.selDiv option[value="SEL1"]')
For an index:
$('.selDiv option:eq(1)')
For a known text:
$('.selDiv option:contains("Selection 1")')
EDIT: As commented above the OP might have been after changing the selected item of the dropdown. In version 1.6 and higher the prop() method is recommended:
$('.selDiv option:eq(1)').prop('selected', true)
In older versions:
$('.selDiv option:eq(1)').attr('selected', 'selected')
EDIT2: after Ryan's comment. A match on "Selection 10" might be unwanted. I found no selector to match the full text, but a filter works:
$('.selDiv option')
.filter(function(i, e) { return $(e).text() == "Selection 1"})
EDIT3: Use caution with $(e).text() as it can contain a newline making the comparison fail. This happens when the options are implicitly closed (no </option> tag):
<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
:
</select>
If you simply use e.text any extra whitespace like the trailing newline will be removed, making the comparison more robust.

None of the methods above provided the solution I needed so I figured I would provide what worked for me.
$('#element option[value="no"]').attr("selected", "selected");

You can just use val() method:
$('select').val('the_value');

By value, what worked for me with jQuery 1.7 was the below code, try this:
$('#id option[value=theOptionValue]').prop('selected', 'selected').change();

There are a number of ways to do this, but the cleanest approach has been lost among the top answers and loads of arguments over val(). Also some methods changed as of jQuery 1.6, so this needs an update.
For the following examples I will assume the variable $select is a jQuery object pointing at the desired <select> tag, e.g. via the following:
var $select = $('.selDiv .opts');
Note 1 - use val() for value matches:
For value matching, using val() is far simpler than using an attribute selector: https://jsfiddle.net/yz7tu49b/6/
$select.val("SEL2");
The setter version of .val() is implemented on select tags by setting the selected property of a matching option with the same value, so works just fine on all modern browsers.
Note 2 - use prop('selected', true):
If you want to set the selected state of an option directly, you can use prop (not attr) with a boolean parameter (rather than the text value selected):
e.g. https://jsfiddle.net/yz7tu49b/
$option.prop('selected', true); // Will add selected="selected" to the tag
Note 3 - allow for unknown values:
If you use val() to select an <option>, but the val is not matched (might happen depending on the source of the values), then "nothing" is selected and $select.val() will return null.
So, for the example shown, and for the sake of robustness, you could use something like this https://jsfiddle.net/1250Ldqn/:
var $select = $('.selDiv .opts');
$select.val("SEL2");
if ($select.val() == null) {
$select.val("DEFAULT");
}
Note 4 - exact text match:
If you want to match by exact text, you can use a filter with function. e.g. https://jsfiddle.net/yz7tu49b/2/:
var $select = $('.selDiv .opts');
$select.children().filter(function(){
return this.text == "Selection 2";
}).prop('selected', true);
although if you may have extra whitespace you may want to add a trim to the check as in
return $.trim(this.text) == "some value to match";
Note 5 - match by index
If you want to match by index just index the children of the select e.g. https://jsfiddle.net/yz7tu49b/3/
var $select = $('.selDiv .opts');
var index = 2;
$select.children()[index].selected = true;
Although I tend to avoid direct DOM properties in favour of jQuery nowadays, to future-proof code, so that could also be done as https://jsfiddle.net/yz7tu49b/5/:
var $select = $('.selDiv .opts');
var index = 2;
$select.children().eq(index).prop('selected', true);
Note 6 - use change() to fire the new selection
In all the above cases, the change event does not fire. This is by design so that you do not wind up with recursive change events.
To generate the change event, if required, just add a call to .change() to the jQuery select object. e.g. the very first simplest example becomes https://jsfiddle.net/yz7tu49b/7/
var $select = $('.selDiv .opts');
$select.val("SEL2").change();
There are also plenty of other ways to find the elements using attribute selectors, like [value="SEL2"], but you have to remember attribute selectors are relatively slow compared to all these other options.

Using jquery-2.1.4, I found the following answer to work for me:
$('#MySelectionBox').val(123).change();
If you have a string value try the following:
$('#MySelectionBox').val("extra thing").change();
Other examples did not work for me so that's why I'm adding this answer.
I found the original answer at:
https://forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu

Exactly it will work try this below methods
For normal select option
<script>
$(document).ready(function() {
$("#id").val('select value here');
});
</script>
For select 2 option trigger option need to use
<script>
$(document).ready(function() {
$("#id").val('select value here').trigger('change');
});
</script>

$(elem).find('option[value="' + value + '"]').attr("selected", "selected");

You could name the select and use this:
$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);
It should select the option you want.

Answering my own question for documentation. I'm sure there are other ways to accomplish this, but this works and this code is tested.
<html>
<head>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">
$(function() {
$(".update").bind("click", // bind the click event to a div
function() {
var selectOption = $('.selDiv').children('.opts') ;
var _this = $(this).next().children(".opts") ;
$(selectOption).find("option[index='0']").attr("selected","selected");
// $(selectOption).find("option[value='DEFAULT']").attr("selected","selected");
// $(selectOption).find("option[text='Default']").attr("selected","selected");
// $(_this).find("option[value='DEFAULT']").attr("selected","selected");
// $(_this).find("option[text='Default']").attr("selected","selected");
// $(_this).find("option[index='0']").attr("selected","selected");
}); // END Bind
}); // End eventlistener
</script>
</head>
<body>
<div class="update" style="height:50px; color:blue; cursor:pointer;">Update</div>
<div class="selDiv">
<select class="opts">
<option selected value="DEFAULT">Default</option>
<option value="SEL1">Selection 1</option>
<option value="SEL2">Selection 2</option>
</select>
</div>
</body>
</html>

For setting select value with triggering selected:
$('select.opts').val('SEL1').change();
For setting option from a scope:
$('.selDiv option[value="SEL1"]')
.attr('selected', 'selected')
.change();
This code use selector to find out the select object with condition, then change the selected attribute by attr().
Futher, I recommend to add change() event after setting attribute to selected, by doing this the code will close to changing select by user.

$('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");
// or
$('#select option[value="myValue"]').prop("selected",true).trigger("change");

Try this
you just use select field id instead of #id (ie.#select_name)
instead of option value use your select option value
<script>
$(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
});
</script>

I use this, when i know the index of the list.
$("#yourlist :nth(1)").prop("selected","selected").change();
This allows the list to change, and fire the change event.
The ":nth(n)" is counting from index 0

i'll go with:-
$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });

/* This will reset your select box with "-- Please Select --" */
<script>
$(document).ready(function() {
$("#gate option[value='']").prop('selected', true);
});
</script>

For Jquery chosen if you send the attribute to function and need to update-select option
$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');

if you want to not use jQuery, you can use below code:
document.getElementById("mySelect").selectedIndex = "2";

The $('select').val('the_value'); looks the right solution and if you have data table rows then:
$row.find('#component').val('All');

Thanks for the question. Hope this piece of code will work for you.
var val = $("select.opts:visible option:selected ").val();

There are a few suggestions why you should use prop instead of attr. Definitely use prop as I've tested both and attr will give you weird results except for the simplest of cases.
I wanted a solution where selecting from an arbitrarily grouped select options automatically selected another select input on that same page. So for instance, if you have 2 dropdowns - one for countries, and the other for continents. In this scenario, selecting any country automatically selected that country's continent on the other continent dropdown.
$("#country").on("change", function() {
//get continent
var originLocationRegion = $(this).find(":selected").data("origin-region");
//select continent correctly with prop
$('#continent option[value="' + originLocationRegion + '"]').prop('selected', true);
});
$("#country2").on("change", function() {
//get continent
var originLocationRegion = $(this).find(":selected").data("origin-region");
//select continent wrongly with attr
$('#continent2 option[value="' + originLocationRegion + '"]').attr('selected', true);
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<form>
<h4 class="text-success">Props to the good stuff ;) </h4>
<div class="form-row">
<div class="form-group col-md-6 col-sm-6">
<label>Conuntries</label>
<select class="custom-select country" id="country">
<option disabled selected>Select Country </option>
<option data-origin-region="Asia" value="Afghanistan">Afghanistan</option>
<option data-origin-region="Antartica" value="Antartica">Antartica</option>
<option data-origin-region="Australia" value="Australia">Australia</option>
<option data-origin-region="Europe" value="Austria">Austria</option>
<option data-origin-region="Asia" value="Bangladesh">Bangladesh</option>
<option data-origin-region="South America" value="Brazil">Brazil</option>
<option data-origin-region="Africa" value="Cameroon">Cameroon</option>
<option data-origin-region="North America" value="Canada">Canada</option>
<option data-origin-region="South America" value="Chile">Chile</option>
<option data-origin-region="Asia" value="China">China</option>
<option data-origin-region="South America" value="Ecuador">Ecuador</option>
<option data-origin-region="Australia" value="Fiji">Fiji</option>
<option data-origin-region="North America" value="Mexico">Mexico</option>
<option data-origin-region="Australia" value="New Zealand">New Zealand</option>
<option data-origin-region="Africa" value="Nigeria">Nigeria</option>
<option data-origin-region="Europe" value="Portugal">Portugal</option>
<option data-origin-region="Africa" value="Seychelles">Seychelles</option>
<option data-origin-region="North America" value="United States">United States</option>
<option data-origin-region="Europe" value="United Kingdom">United Kingdom</option>
</select>
</div>
<div class="form-group col-md-6 col-sm-6">
<label>Continent</label>
<select class="custom-select" id="continent">
<option disabled selected>Select Continent</option>
<option disabled value="Africa">Africa</option>
<option disabled value="Antartica">Antartica</option>
<option disabled value="Asia">Asia</option>
<option disabled value="Europe">Europe</option>
<option disabled value="North America">North America</option>
<option disabled value="Australia">Australia</option>
<option disabled value="South America">South America</option>
</select>
</div>
</div>
</form>
<hr>
<form>
<h4 class="text-danger"> Attributing the bad stuff to attr </h4>
<div class="form-row">
<div class="form-group col-md-6 col-sm-6">
<label>Conuntries</label>
<select class="custom-select country-2" id="country2">
<option disabled selected>Select Country </option>
<option data-origin-region="Asia" value="Afghanistan">Afghanistan</option>
<option data-origin-region="Antartica" value="Antartica">Antartica</option>
<option data-origin-region="Australia" value="Australia">Australia</option>
<option data-origin-region="Europe" value="Austria">Austria</option>
<option data-origin-region="Asia" value="Bangladesh">Bangladesh</option>
<option data-origin-region="South America" value="Brazil">Brazil</option>
<option data-origin-region="Africa" value="Cameroon">Cameroon</option>
<option data-origin-region="North America" value="Canada">Canada</option>
<option data-origin-region="South America" value="Chile">Chile</option>
<option data-origin-region="Asia" value="China">China</option>
<option data-origin-region="South America" value="Ecuador">Ecuador</option>
<option data-origin-region="Australia" value="Fiji">Fiji</option>
<option data-origin-region="North America" value="Mexico">Mexico</option>
<option data-origin-region="Australia" value="New Zealand">New Zealand</option>
<option data-origin-region="Africa" value="Nigeria">Nigeria</option>
<option data-origin-region="Europe" value="Portugal">Portugal</option>
<option data-origin-region="Africa" value="Seychelles">Seychelles</option>
<option data-origin-region="North America" value="United States">United States</option>
<option data-origin-region="Europe" value="United Kingdom">United Kingdom</option>
</select>
</div>
<div class="form-group col-md-6 col-sm-6">
<label>Continent</label>
<select class="custom-select" id="continent2">
<option disabled selected>Select Continent</option>
<option disabled value="Africa">Africa</option>
<option disabled value="Antartica">Antartica</option>
<option disabled value="Asia">Asia</option>
<option disabled value="Europe">Europe</option>
<option disabled value="North America">North America</option>
<option disabled value="Australia">Australia</option>
<option disabled value="South America">South America</option>
</select>
</div>
</div>
</form>
</div>
As seen in the code snippet, prop works correctly every time, but attr fails to select properly once the option has been selected once.
Keypoint: We're usually interested in the property of the attribute, so its safer to use prop over attr in most situations.

How to remove or hide duplicate value from dropdownlist in jquery

I have a dropdownlist. where i load my all due client list from database. but one client have one more due amount. so it's loads on my dropdownlist and make duplicate client name's,now i want to remove duplicate clients name.
Here is my dropdownlist.
<label class="form-label">Client Name</label>
<select class="form-control" name="client_id" id="client_id">
<option value="">-Select Client-</option>
#foreach($clients as $client)
<option value="{{$client->id}}">{{$client->client_name}}</option>
#endforeach
</select>
Here, is my tried jquery part.
$(document).ready(function(){
var map={};
$('#client_id').each(function(){
if(map[this.value])
{
$(this).remove();
}
map[this.value]=true;
});
});

You're very close.
Just change:
$('#client_id').each(function(){
to:
$('#client_id option').each(function(){
That will iterate through all the options instead of the single #client_id.
Snippet:
var map = {};
$('#client_id option').each(function() {
if (map[this.value]) {
$(this).remove();
}
map[this.value] = true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="client_id">
<option value="">-Select Client-</option>
<option value="1">1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

Using .siblings() (to target sibling option elements), and Attribute Equals Selector [attr='']
$(".select option").val(function(idx, val) {
$(this).siblings("[value='"+ val +"']").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select">
<option value="">All</option>
<option value="com">.com 1</option>
<option value="net">.net 1</option>
<option value="com">.com 2</option> <!-- will be removed since value is duplicate -->
<option value="net">.net 2</option> <!-- will be removed since value is duplicate -->
</select>
How it works:
while options are accessed one by one (by .val()) - lookup for .sibling() options that have the same "[value='"+ this.value +"']" and .remove() them.

Preventing duplicate values using PHP is neater than using JavaScript in my opinion.
Solution 1
Eliminating the duplicates as you selecting from database via Eloquent.
// using Model
$clients = Client::get()->groupBy('client_name')->all();
// using DB::class
$clients = DB::table('clients')->get()->groupBy('client_name')->all();
Solution 2
Using Eloquent collect() to eliminate duplicate client_name
// $clients should be an array
#foreach( collect( $clients )->groupBy('client_name')->all() as $client )
<option value="{{ $client->id }}">{{ $client->client_name }}</option>
#endforeach
Solution 3
Using jQuery method, just in case you still want to remove the duplicates using jQuery
$(document).ready(function(){
var map={};
$('#client_id option').each(function(){
var val=$(this).val();
if( map[val] )
{
$(this).remove();
return; // continue to next loop
}
// Registering val to map list
map[val]=1;
});

Get the name of all selected items from select multiple="multiple" options dropdown

I am trying to get the name of all selected items from select multiple="multiple" options dropdown.
In my html page, I have the following code snippet:
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option selected="selected" value="1">Washroom</option>
<option value="2">Restaurant</option>
</select>
In my JS file, I have the following code snippet:
var categoryNameArray = $('#ddlCategory').val();
console.log("category = " + categoryNameArray[0];
However, the variable categoryNameArray only gives me the array of the selected items, what I want is the name of the selected items. Can someone tell me a way how I can make this work? Thanks!

Since val isn't giving you what you want, I'm going to assume you want an array of the text of the selected items.
You can get that like this:
var selectedTextArray = $("#ddlCategory option:selected").map(function() {
return $(this).text();
}).get();
That finds all the selected items, then uses map to get the text of each of them (wrapped in a jQuery object), then uses get to turn that jQuery object into an array.
You can probably use return this.text; rather than return $(this).text();, since HTMLOptionElement has a text property (which most elements don't), but I'd be sure to test with my target browsers to be sure.
Example:
$("#btn").on("click", function() {
var selectedTextArray = $("#ddlCategory option:selected").map(function() {
return $(this).text();
}).get();
console.log(selectedTextArray);
});
Select some items, then click
<input type="button" id="btn" value="here">
<br>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option value="1">Washroom</option>
<option value="2">Restaurant</option>
<option value="3">Service Station</option>
<option value="4">Drive-Thru</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Example with this.text instead of $(this).text():
$("#btn").on("click", function() {
var selectedTextArray = $("#ddlCategory option:selected").map(function() {
return this.text;
}).get();
console.log(selectedTextArray);
});
Select some items, then click
<input type="button" id="btn" value="here">
<br>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option value="1">Washroom</option>
<option value="2">Restaurant</option>
<option value="3">Service Station</option>
<option value="4">Drive-Thru</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

val() returns the values on the selected options, in your case 1, 2 .... You should use text() to get the names of the selected options. You can loop through all selected options using each() method and get the selected values using text():
$('a').on('click', function(e) {
e.preventDefault();
$('#ddlCategory option:selected').each(function(i, selected) {
console.log($(selected).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option selected="selected" value="1">Washroom</option>
<option value="2">Restaurant</option>
</select>
Send
You can read more on how val() works here.
You can read more on how text() works here.

Try this:
var categoryNameArray =
$('#ddlCategory option:selected').map(function(){
return this.text;
}).get();
console.log("category = " + categoryNameArray);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option selected="selected" value="1">Washroom</option>
<option selected="selected" value="2">Restaurant</option>
<option value="3">Coffee Shop</option>
<option value="4">Hotels</option>
</select>

Easy way to get all selected value is $('#ddlCategory').val();

JQuery always returning first option when looking for selected item in select element

I have the following select:
<select class="my-select">
<option value="-1">All</option>
<option value="7">Red</option>
<option value="8">Green</option>
<option value="9">Blue</option>
</select>
I then have a function that runs to see what the selected option is in the select:
function getSelectedOption () {
var selection = $('.my-select').val();
console.log(selection);
}
This is where it gets weird, I can run that function when 'Red', 'Green' and 'Blue' is selected and it'll always return me the correct value. But when I select 'All', the correct value is returned (-1), but when I go back and select 'Red' or any other option after that, the returned value is always (-1). Suggesting that 'All' is selected. When it's not. I also inspected the DOM to see, and in the case where 'Red' was selected, the DOM looks like:
<select class="my-select">
<option value="-1">All</option>
<option value="7" selected="selected">Red</option>
<option value="8">Green</option>
<option value="9">Blue</option>
</select>
But $('.my-select').val() is returning me the wrong value.

Try this:
$('.my-select').find('option:selected').val()
and it should not be <option val="7"></option>, instead it should look like this:
<option value="7"></option>

Seems to work as it should, what browser are you using?
var $select = $('select');
$select.on('change', function (event) {
console.log($(event.target).val());
});
$select.trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="my-select">
<option value="-1">All</option>
<option value="7">Red</option>
<option value="8" selected>Green</option>
<option value="9">Blue</option>
</select>

You have used wrong attribute in option is val, correct attribute is value for assign different value then text/label
function getSelectedOption () {
var selection = $('.my-select').val();
console.log(selection);
}
$(".my-select").change(getSelectedOption);
getSelectedOption();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select class="my-select">
<option value="-1">All</option>
<option value="7" selected="selected" >Red</option>
<option value="8">Green</option>
<option value="9">Blue</option>
</select>

jQuery: Get value from multiple fields and show in text field

I have 6 different select boxes and a text field which I need to fetch the value from and combine in to one text field using jQuery.
I understand essentially I will build the value for the targetTextField with a string like this: $('#targetTextField').val(opt1+opt2+opt3+opt4+opt5+opt6+textField);
What do I use to fetch the value of select#options1 and transform that in to opt1?
Would it be along the lines of opt1 = $('select#options1').val(); or am I heading in completely the wrong direction?
I've created a basic jsfiddle with just two options at:
http://jsfiddle.net/e2ScF/2/
jQuery
$(function() {
$("#options").change(function(){
var opt1 = $('select#options').val()
}$('#targetTextField').val(opt1+opt2);
});
$("#options2").change(function(){
var opt2 = $('select#options2').val()
}$('#targetTextField').val(opt1+opt2);
});
});
HTML
<select id="options">
<option value="" selected>Choose...</option>
<option value="opt1Value1" >Option 1</option>
<option value="opt1Value2" >Option 2</option>
</select>
<select id="options2">
<option value="" selected>Choose...</option>
<option value="opt2Value1" >Option 1</option>
<option value="opt2Value2" >Option 2</option>
</select>
<input type="text" id="targetTextField" name="targetTextField" size="31" tabindex="0" maxlength="99">
...but it doesn't appear to be working, so I've obviously misunderstood or missed something.

I made this demo for you, hope it helps
http://jsfiddle.net/e2ScF/5/
$(function() {
$("#options").change(function(){
setTarget() ; // Something has changed so lets rebuild the target
});
$("#options2").change(function(){
setTarget();// Something has changed so lets rebuild the target
});
});
// Just get the values you want and update the target
function setTarget(){
var tmp = $("#options").val();
tmp += $("#options2").val();
$('#targetTextField').val(tmp);
}

for dropdown try following
$('select option:selected').text()

have a look at this it should hopefully give you a pointer in what you need to do.
you can change the name to be a class and then just provide your format you want to display in the input. but from your question in presume it should be about that.

If you have different id for select box
var toalopt=$('select option1:selected').text();
toalopt+=$('select option2:selected').text();
toalopt+=$('select option3:selected').text();
toalopt+=$('select option4:selected').text();
toalopt+=$('select option5:selected').text();
toalopt+=$('select option6:selected').text();
document.getElementById('id where you want to club data').innerHTML=toalopt;
If you have same id
$(document).ready(function(){
$('#optionvalue).click(function(){
var values ='';
$('select[name="sameid"]').each(function(index,item){
values +=$(item).val() +' ';
});
$('id where you want to club data').val(values);
});
});
HTml will be normal select tag with id.

First of all, add a class to each of your select elements to better identify them as a group:
<select id="options" class="auto-updater">
<option value="" selected>Choose...</option>
<option value="opt1Value1" >Option 1</option>
<option value="opt1Value2" >Option 2</option>
</select>
<select id="options2" class="auto-updater">
<option value="" selected>Choose...</option>
<option value="opt2Value1" >Option 1</option>
<option value="opt2Value2" >Option 2</option>
</select>
<input type="text" id="targetTextField" name="targetTextField" size="31" tabindex="0" maxlength="99">
Then in jQuery, you can use map() to create an array of the values and display them:
$(".auto-updater").change(function() {
var values = $(".auto-updater").map(function() {
return ($(this).val() == "") ? null : $(this).val(); // ignore default option select
// return $(this).val(); // include all values
}).get();
$("#targetTextField").val(values.join(','));
});
Example fiddle
You can see that I've set this up to ignore select elements which are left on their default value. If you uncomment the line beneath it will include all selects, regardless of value chosen.

Minimal code required for you as below:
$(function() {
$("select").change(function(){
var opts=$('option:selected').val();
var oldVal=$('#targetTextField').val();
$('#targetTextField').val(oldVal+opts);
});
});
Find the jsfiddle demo here.

We Keep Coding

JavaScript is the programming language of the Web.

jquery checking if the selected element is the current of each member - javascript

Related

Select dropdown value by index using JQuery [duplicate]

How to remove or hide duplicate value from dropdownlist in jquery

Get the name of all selected items from select multiple="multiple" options dropdown

JQuery always returning first option when looking for selected item in select element

jQuery: Get value from multiple fields and show in text field

Categories

Resources