unable to get attribute from event handler "this" object - javascript

<select onchange="alert($(this).attr('data-type'))">
<option data-type="1" value="a">a</option>
<option data-type="2" value="b">b</option>
</select>
When I run that on jsfiddle I get null. Any ideas?
Here's the js fiddle:
http://jsfiddle.net/49wyG/
Thanks!

You have to grab the selected index of the element and go from there, try this:
<select onchange="alert(this.options[this.selectedIndex].getAttribute('data-type'));">
<option data-type="1" value="a">a</option>
<option data-type="2" value="b">b</option>
</select>
Works good on my end.

The data-type attributes are on the option elements not the select. I assume you want the data type of the currently selected one
<select onchange="alert($(this).find(':selected').attr('data-type'))">
<option data-type="1" value="a">a</option>
<option data-type="2" value="b">b</option>
</select>
http://jsfiddle.net/49wyG/4/

The this refers to the select not the option. Try this instead:
<select>
<option data-type="1" value="a" onclick="alert($(this).attr('data-type'))">a</option>
<option data-type="2" value="b" onclick="alert($(this).attr('data-type'))">b</option>
</select>
Alternatively you could use the :selected selector or this.selectedIndex to grab the option. Something like this:
<select onchange="alert($(':selected',this).attr('data-type'))" >

you need to do this...
<select onchange="alert(this.options[this.selectedIndex].getAttribute('data-type'))">
<option data-type="1" value="a">a</option>
<option data-type="2" value="b">b</option>
</select>
the "this" object on the change event is the list, not the option

Related

Create a dynamic submenu in dropdown

I have reasons for rescheduling job and also sub-reason under a reason. I want that on selecting the reason, its sub-reason should appear. How do I do that?
<select>
<option value="" disabled="disable" selected="selected">
Select Reason
</option>
<option ng-repeat="reasons in Resonse_schedule ">
{{reasons.reasons}}
</option>
</select>
Use ng-options
AngularJS provides a directive ng-options to dynamically list down the options
<select ng-options="reason.reason as reason.reason for reason in Resonse_schedule">
<option value="" selected disabled >Select Reason</option>
</select>
I would suggest you to go through the documentation of ngOptions to understand it better
You can use this:
<select ng-model="reasonVar" ng-options="reason as reason.name for reason in Resonse_schedule">
<option value="" disabled="disable" selected="selected">Select Reason
</option>
</select>
<select ng-model="reasonSelected">
<option ng-repeat="subReason in reasonVar.subReasons" value="subReason.name">
{{subReason.name}}
</option>
</select>
Where reasonVar is the selected value from the Resonse_schedule list.
Here's a working example for this code:
http://jsfiddle.net/U3pVM/35122/
And here's more complicated one:
http://jsfiddle.net/miparnisari/u50hgn5a/

Select Box Running Change Function With Size Attribute

I am working with select box. I use select box like as below:
<select name="cars" onchange="jsFunction()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<script>
function jsFunction(){
console.log($(.names).val());
}
<script>
The combo is look like as below:
THis function is working when the comboboz is chenged.But i want to show all option at the same time. But i don't want to use multiple option select. So that i used size option like as below:
<select name="cars" size="4" onchange="jsFunction()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
And then the select box look like as below:
And only only one option can selected. But my problem is not working function. When i use size attribute, and then the function is not triggered when selectbox is changed. When i remove this size, and then the function is triggered.
How can i show all option at the same time (without multiselect) without using size attribute ? Or how can i trigger this function with size attribute ?
Your JavaScript function shouldn't log anything at all, as it has a syntax error. $(.names) needs quotes around names. Also, it needs to reflect the class of your <select>.
First you need to add the class names to your select:
<select name="cars" size="4" class="names" onchange="jsFunction()">
And then add quotes around your jQuery DOM target:
console.log($('.names').val());
Here's the new code:
function jsFunction() {
console.log($('.names').val());
}
<select name="cars" size="4" class="names" onchange="jsFunction()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
I've created a fiddle showcasing this here.
Hope this helps!

"Drop-down" selected value not updated in HTML

When I select a new value (3) in a drop down menu, I see that HTML still has the old value (10) as "selected".
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10" selected="selected">10</option>
EDIT 1: the problem manifests itself when I clone the form. The cloned copy has its selected option reset. Is there a way to clone the selected value too?
The reason you are seeing this is that changing the selected index will not alter the attribute on the html element itself. However, the value actually is changed.
See this demo for an example of what the selected index shows when changed

html dropdown selected value

I have one dropdown in my html page that contains some 5 values: A, B, C, D, E. When I select C and page refresh, I want to reset all the selected values to the default page. How do I do that? Currently, when I am refreshing the page, the dropdown value is showing the previously selected value. So how do I do that?
You can add a function to body's onload function and set selected value of the dropdown to desired index.
Add autocomplete="off" to your tag so it will not populate fields automatically.
Just add the selected="selected" attribute to the <option> tag, which will make it the default selected drop-down list value, instead of using JavaScript.
<form>
<select>
<option value="default" selected="selected">Select A Letter:</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
</form>​​​
JSFIDDLE
You can try this:
<select autocomplete="off">
<option value="">Select none</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
</select>
[1]: http://jsfiddle.net/nR6CP/2/

Problem with onMouseOut event with select box options (IE)

The problem I am facing with below code is that whenever I try to select any option from the select box, the mouseout event executed (in IE, Mozilla doing great) and option disappear. How can one get over this bug?
<select name="ed" id="ed" dir="ltr" style="width:200px;overflow:hidden;" onMouseOver="this.style.width='auto'" onMouseOut="this.style.width='200px';">
<option value="1" selected="selected">click here</option>
<option value="1">Samuel Jackson</option>
<option value="2">David Nalog</option>
<option value="3">This one is a real real big name</option>
</select>
I changed the code do it conditionally. Now it is working fine. Check it.
<select name="ed" id="ed" dir="ltr" style="width:200px;overflow:hidden;"
OnMouseOver="this.style.width='auto';" onmouseout="if(!this.focussed) {this.style.width='200px';}" onfocus="this.focussed=true;" onblur="this.style.width='200px';this.focussed=false;" >
<option value="1" selected="selected">click here</option>
<option value="1">Samuel Jackson</option>
<option value="2">David Nalog</option>
<option value="3">This one is a real real big name</option>
</select>

Categories

Resources