I have a select form with the folliwing code:
<select id="xyz" name="xyz label="xyz showconstraints="false" class="form-control" onchange="isValid();">
<option value=""></option>
<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>
</select>
If I select e.g. the option "8", I have to click outside the form, for the function to be called. (it makes the form glow red/green if valid/invalid input). How can the function be called immediately, even if I still have the focus on the form?
Thanks!
Uddhabh is right, but be aware that the "input" event only works starting Internet Explorer 9.
https://msdn.microsoft.com/en-us/library/ie/gg592978%28v=vs.85%29.aspx
Related
I'm working on a simple web app using flask and I added a simple rating system using the select tag. My question is how I go to another route once the user select a number from the dropdown menu and also know which number they choosed.
<label class="custom-select">
Give your rate
<select class="custom-select"
style="width:200px;" id="example">
<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>
</select>
</label>
So I have the following code:
<select id="basicInput" ng-model="MyCtrl.value">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
But in the console, I find this:
<select id="basicInput" ng-model="MyCtrl.value">
<option value="? object:null ?"></option>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I've seen this question resolved before, but all of answers I found were wrestling with either ng-options or ng-repeat. This code uses neither, so why am I getting this issue in the first place? More importantly, how do I prevent my page from loading this tag with the phantom option? Does it have something to do with the ng-model?
EDIT:
Since asking this question, I've added the following to my code:
<select id="basicInput" ng-model="MyCtrl.value">
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I have also set Myctrl.value = 0. Still I find myself with the same error. Ideas?
This question has already answered before. Please check this URL. According them
The empty option is generated when a value referenced by ng-model
doesn't exist in a set of options passed to ng-options. This happens
to prevent accidental model selection: AngularJS can see that the
initial model is either undefined or not in the set of options and
don't want to decide model value on its own.
Instead you can do it in this way
<select id="basicInput" ng-model="MyCtrl.value">
<option value="" ng-if="false"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
In short: the empty option means that no valid model is selected (by valid I mean: from the set of options). You need to select a valid model value to get rid of this empty option
You must initialize MyCtrl.value to one of the values provided by the options, otherwise Angular will render an empty selection because the selected model does not exist in the list of options.
in MyCtrl:
$scope.value = 1;
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
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to pass parameters on onChange of html select
Been having a bit of a puzzle here. I understand that there's nothing happening on OnChange event in a option tag. But I would like to pass the value of whatever option is selected (1 to 7) into the onChange event in the select tag (in place of what I have there as '7'). What's the best way to do this?
I basically want a font size selection box. The fmtEdit function changes the size.
<select onchange="fmtEdit('Icontent','FontSize','7')">
<option value="0" selected="true">font size</option>
<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>
</select>
Thanks!
gabstero
You could try the link that KRyan mentioned in the comment under the OP as that should solve your question. If you insist in doing it inline, try this.
<select onchange="fmtEdit('Icontent','FontSize',this.options[this.selectedIndex].value)">
<option value="0" selected="true">font size</option>
<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>
</select>
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/