This is my jspPage.
<select id="class_Teacher" name="classTeacher" style="height:25px; width: 190px;" onchange="Class(this.id)">
<option id="1">Manager</option>
<option id="2">Supervisor</option>
</select>
And here is javascript
function Class(str)
{
alert(str);
}
i want to get the id of Option on onchange Event. Thanks :)
You can do this if you are trying to get the id of the option which has been selected
function Class(str)
{
var select = document.getElementById("class_Teacher");
var option = select.options[select.selectedIndex];
alert(option.id);
}
Your onchange event will look like this. Just remove the .id as that will return the id of the select box itself not the option
onchange="myFunction(this)"
and your javascript function like this, which will alert the ID of the selected option
function myFunction(ele){
alert(ele.options[ele.selectedIndex].id);
}
Broken down ele represents the select box (a dom object). .options accesses the options within the select box. the [] brackets are a way of accessing a specific option. Like an array myArr[1] etc. and ele.selectedIndex returns a number representing the selected option i.e if the first option is chosen - ele.selectedIndex will be equivalent to 0.
HTML (you should use "value" attribute instead of "id")
<select id="class_Teacher" name="classTeacher" style="height:25px; width: 190px;" onchange="onChange()">
<option id="1" value="ID1">Manager</option>
<option id="2" value="ID2">Supervisor</option>
</select>
JS
var selectElement = document.getElementById("class_Teacher");
selectElement.onchange=function(){
alert(selectElement.options[selectElement.selectedIndex].id); // id in the html element
alert(selectElement.selectedIndex); // index starting from 0
alert(selectElement.value); // value of the selected element
};
Fiddle
Use selsectedIndex Property of GetElementByID
<script>
function val() {
d = document.getElementById("select_id").selectedIndex;
alert(d);
}
</script>
<select onchange="val()" id="select_id">
Related
Let's say I have this code:
<select id = dropdown-list>
<option value = "0"> Yes </option>
<option value = "1"> No </option>
</select>
The user can select yes or no from a dropdown list. How can I use pure JS/HTML to figure out what the user has selected (and is currently showing in the dropdown list box when the list isn't expanded) so I can use that data elsewhere? The only way I can figure out is if I add an eventListener on each option but I feel there is a better way. I am quite new to JS so I'm not sure. Thank you.
You can use onchange attribute from select element.
<select id="dropdown-list" onchange="onChange(this.value)">
<option value = "0"> Yes </option>
<option value = "1"> No </option>
</select>
and in JS:
function onChange(val) {
// `val` is the value
}
Execute a JavaScript function changeResult when a user changes the selected option of a element:
Flow:
We bind changeRegult using onchange event listener.
When we change the dropdown menu, it calls changeResult function.
Inside the function, we select our dropdown menu using its id property.
After getting the element by id, we can now access all properties.
Here we want to show the value property, so we use document.getElementById("dropdown-list").value.
For more check this link.
function changeResult() {
var x = document.getElementById("dropdown-list").value;
document.getElementById("result").innerHTML = "You selected: " + x;
}
<select id = "dropdown-list" onchange="changeResult()">
<option value = "0"> Yes </option>
<option value = "1"> No </option>
</select>
<p id="result"></p>
You may want to use on change event.
Since you use each I suppose you are using Jquery.
If you have any question just let me know.
$(document).ready(function(){
$('#dropdown-list').on('change',function(){
alert($(this).children('option:selected').val());
})
});
https://jsfiddle.net/u4dz162o/
I have dropdownlist on a webform. I need a 'hidden' variable per item in the dropdown list which I can retrieve clientside using the onchange event.
So on the page load I'm setting a custom attribute after I databind the dropdownlist:
For i = 0 To cboNameAL.Items.Count - 1
cboNameAL.Items(i).Attributes.Add("Charge_Rate", usernamesAdapterDataTable.Item(i).ChargeRate)
Next
This works and when I look at my rendered page I see this markup for each item in the dropdownlist
<option value="05ab8c45-f7ce-4250-8458-1421e79e8a51" charge_rate="32">dave</option>
My javascript function is firing fine from the onchange event, however I can't retrieve the attribute value for Charge_Rate.
I've tried every combination of:
var lCharge_Rate = document.getElementById("<%=cboNameAL.ClientID%>").selectedItem.attributes('Charge_Rate');
var lCharge_Rate = document.getElementById("<%=cboNameAL.ClientID%>").attributes('Charge_Rate');
var lCharge_Rate = document.getElementById("<%=cboNameAL.ClientID%>")attr('Charge_Rate');
var lCharge_Rate = document.getElementById("<%=cboNameAL.ClientID%>").getAttributes('Charge_Rate');
Each with either ('Charge_Rate') or ("Charge_Rate") or .Charge_Rate
I've debugged and the best I can do is for my variable lCharge_Rate to be null.
Any ideas? Happy to rework if it can't be done this way...
You can use the following code to get the value of your custom attribute
//This line will load the DOM of dropdown
var cboNameAL = document.getElementById("<%=cboNameAL.ClientID%>");
//This will return the selected option
var selectedOption = cboNameAL.options[cboNameAL.selectedIndex];
//This will give you the value of the attribut
var charge_rate = selectedOption.attributes.charge_rate.value;
You need to select the options first before you can get the attribute.
var e = document.getElementById("client_id"),
lCharge_Rate = e.options[e.selectedIndex].getAttribute('charge_rate');
document.write("Charge Rate = "+lCharge_Rate);
<select id="client_id">
<option value="05ab8c45-f7ce-4250-8458-1421e79e8a51" charge_rate="32">dave</option>
</select>
Create a variable that equals the value of your custom attribute, then use it as you desire. See my example and adjust as needed.
var $divAtribut = $("div").attr("Charge_Rate");
alert($divAtribut);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div Charge_Rate="4424">Click on run to get the attribute</div>
<code>
<!– my html –>
<select name="custom-select-two">
<option value="1" data-monthvalue="31">Jan</option>
<option value="2" data-monthvalue="28">Feb</option>
<option value="3" data-monthvalue="31">Mar</option>
<option value="4" data-monthvalue="30">Apr</option>
<option value="5" data-monthvalue="31">May</option>
<select>
<!– Get value of option’s custom attribute value from dropdown or select box –>
<script type="text/javascript">
$(document).ready(function(){
var monthvalue = $('.custom-select-two :selected').data('monthvalue');
alert(monthvalue); // here comes your dropdown option's custom attribute value
});
</script>
</code>
I have a selector on webpage with data-id and value
HTML
<select id="s1">
<option data-id="01">aaaa1</option>
<option data-id="23">bbb1</option>
<option data-id="451">ccc1</option>
<option data-id="56">ddd1</option>
</select>
<p></p>
JAVASCRIPT
$('#s1').change(function() {
var val = $(this).val();
var val_id =$(this).find('option').data('id');
$("p").html("value = " + val + "<br>" +"value-data-id = "+ val_id);
});
I wanna have actual value from selected selector and his data-id. I do not understand why I have data-id from only first option. This is my code http://jsfiddle.net/s55rR/
Please help me to find a bug.
You can do $(this).find('option:selected').data('id').
You've selected multiple elements ($(this).find('option')) but .data() only returns the value from the first element if called on a jQuery with length >1:
Description: Return the value at the named data store for the first element in the jQuery collection, as set by data(name, value) or by an HTML5 data-* attribute.
If you only want the data-id value from the user-selected<option>, then you need to select only that element.
Because you selecting all options, and jQuery returning .data('id') of first one
var val_id =$(this).find('option:selected').data('id');
fiddle
so apparently you have the following
<select>
<option value="0">One</option>
<option value="1">Two</option>
</select>
$('select').val('1'); // selects "Two"
$('select').val('Two'); // also selects "Two"
but what if you have
<select>
<option value="0">1</option>
<option value="1">0</option>
</select>
And I want to set the value...of the form...how can I tell jquery to specifically use the value field or specifically the text in between the option tag...
$('select').find('option[value="1"]').attr('selected', true );
Just select the option based on the value (with the attribute selector) and set the selected attribute like this:
var value = "1"; // Set the value that you want to select
$("select option[value=" + value + "]").attr("selected","selected");
http://jsfiddle.net/VU9BC/
Just select the option based on the value (with the attribute selector) and set the selected attribute like this Simply no Headace :)
By Value
$( "select" ).change( displayVals );
https://jsfiddle.net/haroonmind/quemz47o/1/
I got one text box and one select box.
<input type="text" />
<select>
<option value=1>Test1</option>
<option value=2>Test2</option>
</select>
Now i want when user type anything in text box, to change value=2 text.
I tried this, but looks like don't work.
$(document).ready(function () {
$("#textbox").keyup(function () {
$("select#sync[value='2']").text($(this).val());
});
});
Apart from the fact that you haven't given the elements IDs, the problem is that you need to access the <option> element (that one has a value of 2 - there is no <select value=2>). Also, IDs are unique, so using select#sync is (should be) the same as #sync:
$("#sync option[value='2']")
<input type="text" id="textbox" />
<select>
<option value="1">Test1</option>
<option value="2">Test2</option>
</select>
$(document).ready(function () {
$("#textbox").keyup(function() {
$("select option[value='2']").text($(this).val());
});
});
http://jsfiddle.net/gxaWE/
you can try
$("#sync").val($(this).val());
provided that the user only types the value that is in range
DEMO
$("#text_box").keyup(function() {
$("#sync option[value='2']").text($(this).val());
});
Here is fiddle showing it working:
http://jsfiddle.net/bRw8Z/1/
It changes select option number 2 text. Is that what you wanted?
I see a few problems here:
It doesn't make sense to set the innerText of a <select> element; you want to set its value instead,
The #textbox selector wouldn't actually select anything.
If your input did not exactly match an <option>'s value attribute, the first <option> would be selected.
This snippet will select an <option> if its value attribute matches the value of the text input.
$(document).ready(function () {
$("input").keyup(function () {
var $select = $("select"),
value = $(this).val();
if($select.find('option[value="' + value + '"]').length){
$select.val(value);
}
});
});
http://jsfiddle.net/2XxRQ/1/