Develop Reference

Responsive textboxes and a null 'Select' option in loaded list

I have two select boxes, one is for products and the other is for product type. what a appears in the product type list is dependent on what is selected in the product. What i want to achieve is a null option at the top of the loaded list so that i can search just on the product. How would i go about this?
so far i have
<select class="form-control" name="product_type" id="producttype">
<option value=""></option>
</select>
and JS/jquery
$('#product').on('change', function(e) {
console.log(e);
var prod_id = e.target.value;
$.get('/ajax-subcat?prod_id=' + prod_id, function(data) {
$('#producttype').empty();
$.each(data, function(index, subcatObj) {
$('#producttype').append('<option value="' + subcatObj.id + '">' + subcatObj.name + '</option>');
});
});
});

You can append that default options before filling your select in the each, something like this:
$('#product').on('change', function(e) {
console.log(e);
var prod_id = e.target.value;
$.get('/ajax-subcat?prod_id=' + prod_id, function(data) {
$('#producttype').empty();
$('#producttype').append('<option selected disabled>Select a product type</option>');
$.each(data, function(index, subcatObj) {
$('#producttype').append('<option value="' + subcatObj.id + '">' + subcatObj.name + '</option>');
});
});
});

Get selected value of option with multiple dropdown menus using javascript

I have multiple features that have multiple options that need to be updated when an option is selected. I also need to pass a third piece of data through the attribute element.
.getElementById() works for a single dropdown menu, but how do I get it to work when there are multiple menus on the page?
I have tried var e = document.getElementsByClassName("testClass"); which did not work.
I also tried to create optionsText & optionsValue in the same way that optionsFtr is created with var optionsValue = $('option:selected', this).value; and that didn't work either.
http://jsfiddle.net/8awqLek4/4/
HTML Code
<ul>
<li>
<div class="ftrsTitle">BODY</div>
<select class="testClass" id="testId">
<option>Select</option>
<option ftr="bod" value="blk">Black</option>
<option ftr="bod" value="grn">Kelly Green</option>
<option ftr="bod" value="red">Red</option>
<option ftr="bod" value="roy">Royal</option>
</select>
</li>
<li>
<div class="ftrsTitle">TRIM</div>
<select class="testClass">
<option>Select</option>
<option ftr="trm" value="blk">Black</option>
<option ftr="trm" value="grn">Kelly Green</option>
<option ftr="trm" value="red">Red</option>
<option ftr="trm" value="roy">Royal</option>
</select>
</li>
</ul>
<div id="vars"></div>
Javascript Code
$(document).ready(function () {
$("select").on('change', function () {
var e = document.getElementById("testId");
var optionsText = e.options[e.selectedIndex].text;
var optionsValue = e.options[e.selectedIndex].value;
var optionsFtr = $('option:selected', this).attr('ftr');
$("#vars").html("<p>optionsText: " + optionsText + "</p><p>optionsValue: " + optionsValue + "</p><p>optionsFtr: " + optionsFtr + "</p>");
});
});

To read select value you can simply use $(this).val(). To get selected option label you should use text() method.
Fixed code looks like this:
$("select").on('change', function () {
var optionsText = $('option:selected', this).text();
var optionsValue = $(this).val();
var optionsFtr = $('option:selected', this).attr('ftr');
$("#vars").html("<p>optionsText: " + optionsText + "</p><p>optionsValue: " + optionsValue + "</p><p>optionsFtr: " + optionsFtr + "</p>");
});
Demo: http://jsfiddle.net/8awqLek4/3/

This should do it:
$(document).ready(function(){
$("select").on('change', function(){
var e = $(this).find("option:selected");
$("#vars").html("<p>optionsText: " + e.text() + "</p><p>optionsValue: " + $(this).val() + "</p><p>optionsFtr: " + e.attr("ftr") + "</p>");
});
});
use the this keyword. Than you can access the select targeted, and with find in combination with the :selected selector you can find the option element currently selected.
http://jsfiddle.net/8awqLek4/5/

jQuery select (Dropdown) populate from array

I currently have this here working..
$(document).ready(function() {
$("#image").change(function() {
$("#imagePreview").empty();
$("#imagePreview").append("<img src=\"" + $("#image").val() + "\" />");
});
});
<select name="image" id="image" class="inputbox" size="1">
<option value="imageall.jpg" selected> - All - </option>
<option value="image1.jpg">image1.jpg</option>
<option value="image2.jpg">image2.jpg</option>
<option value="image3.jpg">image3.jpg</option>
</select>
<div id="imagePreview">
</div>
from this previous question:
Previous Question
I was wondering how can I populate the from a jQuery Array instead?
How could I do that? So basically the values and name from an array
This is the example in Fiddle i will be using Example Working

function populateSelect(el, items) {
el.options.length = 0;
if (items.length > 0)
el.options[0] = new Option('please select', '');
$.each(items, function () {
el.options[el.options.length] = new Option(this.name, this.value);
});
}
As seen here:
Using javascript and jquery, to populate related select boxes with array structure

You may want to retrieve names and values from JSON array this way.
var image_maps = {image1: "image1.jpg", image2: "image2.jpg"};
$.each(image_maps , function(name, value) {
alert("name: " + name + " value: " + value);
});

Item selected to send to a JQuery function

I'm beginning in JQuery, and I'd like to know if there is a way to send a selected item from a selectlist to a JQuery function.
So, here is the fiddle I've used :
http://jsfiddle.net/YCPM7/7/
I'd like to know if there is a way to replace the 'option:select' that I've set inside the call of the function.
Here is a part of the code that's on the fiddle :
<select id="StateSelection1" name="StateSelection">
<option value="1">state 1</option>
<option value="2">state 2</option>
<option value="3">state 3</option>
<option value="4">state 4</option>
<option value="5">state 5</option>
</select>
</td><td>
<input type="button" value="envoi" class="bouton" name="test" onclick="switchDiv(1, 'option:select')"/>
the '1' that you can see inside "switchDiv(1, 'option:select')" is not really important. That's an id that will be generated by razor (vb.net).

Easy do. First of all, put an ID to the button. Let's call it btnTest.
And now, to the jQuery part, use this :
$("#btnTest").click( function() {
alert($("#StateSelection1 option:selected").text());
});
This will get the Text of the select, to get the index use val() instead of text()

I've tried not to edit the HTML you've shown in your jsfiddle too much, only adding the .js-target, .js-1 and .js-2 classes to help explain what's being done.
The below bit of jQuery should hide all of the divs to begin with, and then when clicking on one of the buttons, hide them all again and just display the div whose option was selected.
$(".js-target").hide();
$(".bouton").on("click", function() {
$this = $(this);
if ($this.hasClass("js-1")) {
number = "1";
} else if ($this.hasClass("js-2")) {
number = "2";
}
target = $('#StateSelection' + number + ' option:selected').val();
$(".js-target").hide();
$("#" + number + "/" + target).show();
});​
The fiddle can be viewed here.

once u get the value to select u can use
$("#btnTest").click( function() {
$("#StateSelection1").val(YOUR_VALUE);
}

Finally I choose to do this with a onClick method, which seemed to be a lot easier :
<script type="text/javascript">
function switchDiv(idCont) {
value = $('#DivSelection' + idCont + ' option:selected').val();
alert("contactid = " + idCont + " DivSelected = " + value);
$("#" + idCont + "1").hide();
$("#" + idCont + "2").hide();
$("#" + idCont + "3").hide();
$("#" + idCont + "4").hide();
$("#" + idCont + "5").hide();
$("#" + idCont + "6").hide();
$("#" + idCont + "7").hide();
$("#" + idCont + "8").hide();
$("#" + idCont + "9").hide();
$("#" + idCont + value).show();
};
</script>
<input id=#item.idContact type="button" value="Envoyer" class="bouton" onclick="switchDiv(#item.idContact)" />

Select a OPTION in a SELECT with jQuery is not working in Firefox

This is a weird issue, it works in IE but it doesn't in Firefox.
I have a SELECT control that when get focus, retrieve the HTML with the OPTIONs in an AJAX call.
The onfocus event handler contains this code:
var selectedValue = $(":input[name='" + fieldName + "']").val();
var dataRetrieved = function(data)
{
$(":input[name='" + fieldName + "']").html(data);
$(":input[name='" + fieldName + "']").val(selectedValue);
alert("data: " + data);
alert("former value: " + selectedValue);
};
$.post(url, data, dataRetrieved);
The first alert shows:
data: <option value=""/>
<option value="1" >a1</option>
<option value="2" >a2</option>
<option value="3" >a3</option>
And the second:
former value: 3
So it should work, actually it does in Internet Explorer (what make me think I'm doing something wrong about the HTML)
Any idea about what could be the problem?
Thanks.

The input selector does not need a colon before it. Your selector should look like this:
$("input[name='" + fieldName + "']")
not
$(":input[name='" + fieldName + "']")
That's my first guess as to why it might not be working.