Develop Reference

jquery loop through select tags on option change

I need help looping through all my select tags in my html page and running some functions on each change
<div id="product_options">
<label>Color</label>
<select name="productOptions" id="colorOpt" style="margin-bottom:10px;">
<option value="1">White</option>
<option value="3">Blue</option>
</select>
<label>Size</label>
<select name="productOptions" id="sizeOpt" style="margin-bottom:10px;">
<option value="2">9oz</option>
<option value="4">10oz</option>**strong text**
</select>
</div>
Everything inside of the main div is variable including the label, names and id's
what i want to do is everything someone updates either one of the selected options i need to figure out which select element they chose and get the value along. So for example if they update the color option to blue i need to trigger a call in jquery to show that select element with id colorOpt was updated with the value of 3
Any ideas I am completely lost as to how to do this. Started with this but not sure if its correct or not
$('#product_options').select("select").each(function(selected, index) {
});

It looks like you started thinking that you'd need to loop through every select...but since you said that you need to "figure out which select element they chose" you can rely on the this keyword inside of a change callback.
Fiddle: http://jsfiddle.net/vpqh3kjz/
Code:
// Every time someone updates either selected option fire a callback
$('#product_options select').change(function () {
// `this` represents the element that changed
var id = this.id;
var value = this.value;
// Do something with your data here
console.log('select element id ' + id + ' was updated with ' + value);
});

$('select').on('change',function(){
var value = $(this).val();
alert(value);
});

Just for helping if someone like land on this question like me.
I searched for a script which i can use to append something according to selected value.
here is what i come up with. JSFIDDLE
Appending code on select field value change and then what's in the value can be took for a loop to append that amount of tags in specific container.
Note: This might give you an error if you have options value other then numbers.
// Every time someone updates selected option fire a callback
$('#product_options select').change(function () {
var container = $('#container');
container.empty();
for(var i = 0; i< this.value; i++){
container.append('<p> index: '+ i +" <br> value: "+ this.value +'</p>');
}
});

Basic java script to get combobox

I am just starting out with some java script in an asp.net mvc web site.
I current have a form which I am working on.
The first field which the user is prompted with is a combobox / select (in html)
here is the code for it:
<select name="select">
#foreach (var item in Model.networks)
{
<option value="">#Html.DisplayFor(modelItem => item.name)</option>
}
</select>
Now my next field depends on the option which they chose from the combo box.
How can I populate the next field based on the option they chose in the combo box?
So when the user navigates to the page they will ave a combo box populated with all the options. Below that will be empty fields. When the user selects a option in the combo box I want it to then populate the empty fields with the corresponding data from the option which was chosen.
How do I go about doing this?
Please give the newby answer as in the method in which it will be done. I am assuming that I will be using java script for it?

Although I cannot understand your question in detail, I hope I can help you.
HTML
If you have a select element that looks like this:
<select id=dropdown>
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
Plain Javascript solution
Running this code:
var element = document.getElementByID('dropdown');
var current = e.options[e.selectedIndex].value;
Would make current be 2. If what you actually want is test2, then do this:
var e = document.getElementById('dropdown');
var strUser = e.options[e.selectedIndex].text;
Which would make current be test2

Put the onChange="getSelectedValue" attribute of the select element and then use the following javascript.
<script>
function getSelectedValue(sel)
{
txtToFill.Text(sel.options[sel.selectedIndex].text);
}
</SCRIPT>

If I understand your question correctly you want to react to a combo box value changing and display different content in your page.
If that is the case what you need to know is
how to handle the change event in the select (drop down)
populate empty fields
Here's how you can register and handle the change event in the dropdown:
$("select[name='select']").on("change", function(){
$('#input1').val("What you want in the input goes here");
});
Here's a fiddle that demonstrates this.

Multiple Dynamic Javascript Dropdowns?

I have currently got a 2-tier javascript drop down box attached to my form, and i am looking to add another 3-tiers, but completely seperate to my current javascript and can't unfortunately figure it out (quite new to javascript :( )
Here what I have so far, it all works ( not even sure what framework to select on fiddle for it to display properly lol :( the embarassment haha
Any help is appreciated <3

This will probably be enough code for you to get the idea.
jsFiddle here
I used jQuery to get handles to the various DOM elements. Here is a quite decent resource for browsing all jQuery selectors, events, effects, css, etc - despite the source. (Just keep hitting Next Chapter)
First, this is your code for catching the optone select element's change event, removed from inline javascript (which is never a good idea):
$('select[name=optone]').change(function() {
var selval = $(this).val();
setOptions(selval);
});
Simple enough, yes?
I left your first setOptions function as is, because it works. However, I wrote the next function setOptions2() in jQuery, to show you how much less typing is required.
To catch the next select element's change event:
$('select[name=opttwo]').change(function() {
var sel2val = $(this).val();
alert('You selected: ' + sel2val);
setOptions2(sel2val);
$('#selthreeDiv').show();
});
Notice in my jsFiddle that I added a hidden div containing the 3rd select control, and I display that control when the 2nd select is changed...
Hopefully this will be of assistance.

ok I did something like this and it worked for me.
your new javascript
function setOptions2(chosen) {
var selbox = document.myform.optthree;
selbox.options.length = 0;
if (chosen == "1") {
selbox.options[selbox.options.length] = new Option('Worked', ' ');
}
}
then added some new html
<select name="opttwo" size="1" onchange="setOptions2(document.myform.optone.options[document.myform.optone.selectedIndex].value);" >
<option value="Please Select Prompt Category" selected="selected">Please Select Prompt Category</option>
</select>
<select name="optthree" size="1">
<option value="Please Select Prompt Category" selected="selected">Please Select Prompt Category</option>
</select>

jQuery - get the selected options of a listitem collection?

I have fields that a user would enter and i would pass it into jQuery and pass to a web service.
I can get textboxes values by:
var name = $("#MainContent_txtName").val()
The problem I'm having is a multi-select that comprises of a list item collection.
If I was to do this server side, I would do something like:
foreach (ListItem li in listTitles)
{
if (li.Selected)
{
selectedValue += li.Value + ",";
}
}
And this would give me the string of selected values from the select list.
I'm having trouble getting it out from jQuery.
If I do
var titles = $("#MainContent_selectListTitles").val()
That is obviously incorrect because it won't bring back the selected list items.
I saw a post that suggested that I could retrieve it if I say option selected.
So I tried this:
var titles= $('#MainContent_selectListTitles option:selected');
The next thing I did was pop an alert to see what the titles were. It just said [object, object].
So my questions are:
Is it possible to get the selected items from the list item collection concatenated into a string?
Or is it better that I get all the form values from a postback even on my code behind and then call the jquery function? If this is an option, i've attempted to do this but have failed. It tells me that it can't find the method. So i'm definitely not calling the jquery function correctly on postback of the button event.
THanks.

I'm not surprised that you've got [object, object] in your alert - that's because you've had and array of selected items (actually, two items were selected) and alert displayed your array as [object, object] which is fine.
Having the following html markup:
<div>
<select multiple="multiple" id="mySelect">
<option value="test1" selected="selected">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3" selected="selected">Test 3</option>
</select>
</div>
And the following script:
<script type="text/javascript">
$.ready = function () {
var selectedItems = $("#mySelect option:selected");
for (var i = 0; i < selectedItems.length; i++) {
alert("The value is: "+selectedItems[i].value + "; the text is: "+selectedItems[i].text);
}
}
</script>
Will probably solve your problem.
Actually, binding the data manually is a huge pain and I do recommend you to look on the modern MVVM libraries like knockout.js.
For instance:
http://knockoutjs.com/examples/controlTypes.html

First, make sure your item id is correct on client side that is "MainContent_selectListTitles". You can check it by "View Source".
If the ID is correct, follow this.
$('#MainContent_selectListTitles').change(function () {
var str = "";
$('#MainContent_selectListTitles option:selected').each(function () {
str += $(this).text() + " ";
//pass str value to your web service here.
});
}).trigger('change');
Every time there is changes, it will call this function which means it will make your web service busy. You can move the above code to button click event if you want.

Linking combo box (JQuery preferrably)

I am wondering if anyone has any experience using a JQuery plugin that converts a html
<select>
<option> Blah </option>
</select>
combo box into something (probably a div) where selecting an item acts the same as clicking a link.
I guess you could probably use javascript to handle a selection event (my javascript knowledge is a little in disrepair at the moment) and 'switch' on the value of the combo box but this seems like more of a hack.
Your advice, experience and recommendations are appreciated.

The simple solution is to use
$("#mySelect").change(function() {
document.location = this.value;
});
This creates an onchange event on the select box that redirects you to the url stored in the value field of the selected option.

I'm not sure where you want to link to when you click the Div, but given something like this perhaps would work:
<select id="mySelect">
<option value="1">Option 1</option>
<option value="2">Option 2</options>
</select>
<div id="myDiv"/>
and the following JQuery creates a list of <div> elements, a goes to a URL based on the value of the option:
$("#mySelect option").each(function() {
$("<div>" + $(this).text() + "</div>").appendTo($("#myDiv")).bind("click", $(this).val(), function(event) {
location.href = "goto.php?id=" + event.data;
});
});
$("#mySelect").remove();
Does this do what you want?

If you're going to have a lot of select boxes that you want to allow to use as redirects, without having to define them independently, try something similar to:
$("[id*='COMMON_NAME']").change(function() {
document.location = this.value;
});
And have your select boxes be named accordingly:
<select id="COMMON_NAME_001">...</select>
<select id="COMMON_NAME_002">...</select>
This creates a onchange event for all IDs containing "COMMON_NAME" to do a redirect of the <option> value.

This bit of javascript in the 'select':
onchange="if(this.options[this.selectedIndex].value!=''){this.form.submit()}"
It's not ideal (because form submissions in ASP.NET MVC which I'm using don't appear to use the routing engine for URLs) but it does its job.