Develop Reference

select product quantity when other product options are changed

I am trying to select the quantity value when the product options are changed. I've tried various jquery functions but I'm getting nowhere fast. I also have to think about multiple products being updated. I need to select the quantity so when the options are changed all the options/quantities are passed to the backend.
Can anyone help with this?
Here is a
jsfiddle showing my html/jquery.
I thought maybe I could iterate over each of the .qty classes and find the .list .qty <select> element but I'm not having much luck.
$(".qty").each(function()
{
// var name = $(this).attr('name');
// console.log(name);
//var x=$('.list').closest('select').find(':selected').val(); //find the value
var x=$('.qty').siblings('.list'); //find the value
console.log(x);
});

Use .list select to grab each select list:
$('.list select').each(function()
{
$(this).find('option').each(function() {
console.log($(this).val(), $(this).text());
}); //find the value
});
For just the value of the select with class qty, use can simply use:
var qty = $('select.qty option:selected').val();
console.log(qty);

JQuery get the option of a checkbox checked

I'm doing some code where i need to get the option(value) from an checkbox checked
Here is how i create the checkbox
function createCheckbox(txt) {
var comb = document.createElement("Select");
comb.className = "something";
for (var i = 0; i < txt.length; i++) {
var option = document.createElement("OPTION");
var optionText = document.createTextNode(txt[i]); //some options
option.appendChild(optionText);
comb.appendChild(option);
}
return comb;
}
Function where i need to show the option that is selected
function foo{
var inputTextValue = document.getElementsByClassName("something");
var checkedValue = $(inputTextValue).is(':checked');
alert(checkedValue); //true/false
}
the alert only show true /false depeding if the checkbox is checked or not.But what i need its the option checked. I already tried $(inputTextValue).is(':checked').val().

Checkbox and Select are two different HTML Elements
For Getting the value of Selected option use
$(".something option:selected").val();

I think tou mix here between checkbox and select.
Select option is selected with :selected attribute.
Checkbox is checked with :checked attribute.

The value of a <select> is the value of the selected option.
$(".something").val()

Dynamically creation select box options issue in IE8

I am using the following function to create a add options to my select box
//add options to the requested select box
addOptionsToSelect : function(__enum , obj, selected_value) {
$(__enum).each(function(i){
var optn = new Option(this.text, this.val)
if(selected_value === this.val){ optn.setAttribute('selected', 'selected') }
$(obj)[0].options.add(optn);
});
return obj
}
__enum is the key value pair containing the value and the text that we pass to the select option
obj is the select box obj which is also created dynamically
selected_value is the value that needs to set as selected on the select box.
The problem here is optn.setAttribute('selected', 'selected') works fine in all the browsers expect IE8.
I am looking for a workaround that will allow me to set the selected value in all the browsers dynamically.

I'd add an option to a like so:
var select = document.getElementById("drop-down");
var newOption = document.createElement("option");
newOption.innerHTML = 'hello';
select.appendChild(newOption);
Here's an example: my fiddle

Change the style of the drop down

I have a 4 drop down list based on each drop down value the other drop down will change i tried to change the style of the drop down list using CSS and jquery and javascript.
I almost got the style of the drop down and the functionality also works fine, but where i am stuck is
In the jquery what is done is
$(document).ready(function(){
$("select").each(function(){
$(this).wrap('<div class="selectbox"/>');
$(this).after("<span class='selecttext'></span><span class='select-arrow'></span>");
var val = $(this).children("option:selected").text();
$(this).next(".selecttext").text(val);
$(this).change(function(){
var val = $(this).children("option:selected").text();
$(this).next(".selecttext").text(val);
});
});
});
so for all the select it automatically wraps with div and after that the 2 spans are placed.
So when i change the value on the 1 drop down for the first time the values of the 2nd drop down is changed .
When i again change the value of the 1 drop down the 2 drop down values does not reset to the default value.
Because the span hold the value of the previously selected value.. How can i overcome this.

Have you tried like this:
$(document).ready(function(){
$("select").each(function(){
$(this).wrap('<div class="selectbox"/>');
$(this).after("<span class='selecttext'></span><span class='select-arrow'></span>");
var val = $(this).children("option:selected").text();
$(this).next(".selecttext").text(val);
});
$("select").change(function(){
var val = $(this).children("option:selected").text();
$(this).next(".selecttext").text(val);
});
});

Parse html list with javascript then output drop down

I am trying to write some javascript that will automatically take text in a html ul list and then output it as a drop down. Here is what I have so far: http://jsfiddle.net/KRWHP/
The problem of course is that the code doesnt go through each list item and output it in its own option tag.

$("li").each(function () {
$('<option />').text($(this).text())
.val($(this).text())
.appendTo("select");
});
Your fiddle, re-fiddlified.

Don't need jQuery. Just create a new option node for each element and append that to the select.
var ul = document.getElementsByTagName("ul")[0];
var select = document.getElementsByTagName("select")[0];
[].forEach.call(ul.children, function (el) {
var option = document.createElement("option");
option.textContent = el.textContent;
select.appendChild(option);
});
Example