Develop Reference

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()

Make the select think ctrl is pressed in javascript?

I'm makin a select with the multiple property enabled.
<select id="lst_prueba1" size="8" multiple>
<option>Alderaan</option>
<option>Corellia</option>
<option>Endor</option>
<option>Kashyyyk</option>
<option>Mustafar</option>
<option>Naboo</option>
<option>Nar Shaddaa</option>
<option>Tatooine</option>
<option>Yavin</option>
</select>
But i want to select the options without the need of pressing the ctrl key.
Is there a way to fake the press using javascript or what could in the onchange event?
The answer provided here didn't work for me:
How to avoid the need for ctrl-click in a multi-select box using Javascript?

Although I'd suggest using checkboxes as mentioned in the comments, this should do the trick. Works in Chrome, Firefox and Edge. Might want to test more depending on your requirements.
<script>
var selected = {};
$("#lst_prueba1").click(function(e) {
var options = this.options;
var option;
var value;
value = $(this).val();
for (var i = 0; i < options.length; i++) {
option = options[i];
if (option.value == value) {
selected[value] = !selected[value];
}
option.selected = !!selected[option.value];
}
});
</script>

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

How do I add items to multiple drop down lists at the same time with Javascript in Razor?

I'm creating an MVC form, and I have multiple checkboxes and two drop down lists. I have figured out how to populate the first DDL based on what boxes are checked (i.e. empty at the beginning, checking boxes fills the items). However, I want to add another DDL that has the same items and populates in the same manner. My code looks like this:
<script type="text/javascript">
function checkedToggle(value, checked) {
x = document.getElementById("filter1");
y = document.getElementById("filter2");
if (checked == true) {
var option = document.createElement("option");
option.text = value;
x.add(option, null);
y.add(option, null);
}
else {
for (i = 0; i < x.length; i++) {
if (x.options[i].value == value) {
x.remove(i);
y.remove(i);
}
}
}
}
</script>
The else statement obviously removes an item from the list once you uncheck the box.
Now, when you click a check box, rather than adding the item to both lists, it only adds to the second one, and I'm not exactly sure why. Any advice?

You need to create two elements, since in your code you just move the first DOM element to the second select.
var option = document.createElement("option");
var option2 = document.createElement("option");
option.text = value;
option2.text = value;
x.add(option, null);
y.add(option2, null);

how to get the index of value in drop down in javascript?

I have dropdown list on my aspx page. I want to mannually set the selected value which in exist in the dropdown list. this value i am getting in var. i want to set this value as selected value when page get initialize. I want this in javascript. is there any property for dropdown as ddp.SelectedValue='40'..? here I don't know the index of 40 in the list.

selectedIndex is a property of HTMLSelectElement so you can do the following:
<select id="foo"><option>Zero<option>One<option>Two</select>
<script>
document.getElementById('foo').selectedIndex = 1; // Selects option "One"
</script>
And given an OPTION element, you can get its index using the index property:
<select><option>Zero<option id="bar">One<option>Two</select>
<script>
alert(document.getElementById('bar').index); // alerts "1"
</script>

I want to manually set the selected value
Iterate the select's options list to get the option you were interested in and set selected on it:
var options= document.getElementById('ddp').options;
for (var i= 0; n= options.length; i<n; i++) {
if (options[i].value==='40') {
options[i].selected= true;
break;
}
}
this will select the first option with a matching value. If you have more than one option with the same value, or a multiple-select, you may need different logic.
This:
document.getElementById('ddp').value= '40';
is specified by HTML5 to do the same, and has worked in most modern browsers for ages, but still fails in IE, unfortunately (even IE9).

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery 1.6.2.min.js" />
<script language="JavaScript">
$(function() {
quickSelect();
// Handler for .ready() called.
});
function quickSelect() {
var bnd = "40";
if (bnd != "") {
$("#ddp option[value='" + bnd + "']").attr("selected", "selected");
}
}
</script>