I want to get value when I change the dropdown on ng-change. My code as follows:-
<select class="form-control" id="cobSRQ2" ng-change="cobchange()" required>
<option>[Select One]</option>
<option value="Primary" selected>Primary</option>
<option value="Secondary">Secondary</option>
<option value="Tertiary">Tertiary</option>
</select>
I want to send the value to Angular JS controller.
Please help
use ng-model for pass the value :
app.controller('controllername',function($scope){
$scope.drpmodel=-1
$scope.cobchange=function(){
alert($scope.drpmodel);
}
});
<select class="form-control" id="cobSRQ2" ng-model="drpmodel" ng-change="cobchange()" required>
<option value="-1">[Select One]</option>
<option value="Primary" selected>Primary</option>
<option value="Secondary">Secondary</option>
<option value="Tertiary">Tertiary</option>
</select>
You could add a ng-model attribute to <select> and pass it in the ng-change function like:
<select ng-model="cob" class="form-control" id="cobSRQ2" ng-change="cobchange(cob)" required>
...
</select>
for ng-change to work you must provide ng-model to select
<select class="form-control" id="cobSRQ2" ng-model="myModel" ng-change="cobchange()" required>
<option>[Select One]</option>
<option value="Primary" selected>Primary</option>
<option value="Secondary">Secondary</option>
<option value="Tertiary">Tertiary</option>
</select>
inside controller
$scope.cobchange=function(){
console.log($scope.myModel);
}
Related
I have problem in the following code;
function check(x){
//do staff here
}
<select onclick="check(this)" class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>
<select onclick="check(this)" class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>
When i click on the select tag, my function works but after selecting an option, the function works again.
But i want the function to work only when i click on the select tag, not when selecting one of the options tag again.
I searched but couldn't find any solution for this. How can i avoid this to happen?
Thanks in advance.
Use onchange instead of onclick.
https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/change_event
<select onchange="check(this.value)" class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>
Set a flag on first execution and check the flag.
var executed = {};
function check(e) {
var name = e.name;
if (!executed[e.name]) {
executed[e.name] = true;
console.log("executed", e.name);
}
}
<select name="select1" onclick="check(this)" class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>
<select name="select2" onclick="check(this)" class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>
If you're using jQuery you can use the one() function as it is documented here
$( "select" ).one('change', function(){
//do staff here
}
<select class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>
<select class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>
Let’s check the event.stopPropagation() method.
I have a select element like this:
<select name="select">
<option value="opt1">Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
and I want user to select a option e.g. opt2, opt3... but opt1,
how to to use html 5 validation to valid the select?
I think the only way to add the validation here is to set the default option value to an empty string and add required attribute to select element. Now you can click on submit button to see the validation:
<form>
<label >Choose an option:</label>
<select name="select" required>
<option value="" disabled selected>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
<input type="submit">
</form>
The issue here is that when you set a value to the default option to something other than empty string the validation infers it as a valid value has been already selected, thus the validation is not triggered at that point.
You can do something like the following:
<select name="select">
<option value="opt1" selected disabled>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
In the snippet above, the opt1 is selected by default. The user can only select opt2 or opt3, but once they do that then they cannot selecte opt1, hope this is the behaviour you're looking for.
Try Using:
<select name="select" required>
<option value="opt1" selected="selected" disabled>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
I want to make my 2 <select> change their values based on a single <select>, for example:
I want my kodethnajaran and kodesemester change their options value based on my selection on kodematkul.
Here is my code:
<div class="form-group">
<label>Mata Kuliah</label>
<select class="form-control" name="kodematkul" id="kodematkul" required>
<option value="null" selected="selected">-- Pilih --</option>
<option value='mk001'>Mobile Programming</option>
<option value='mk003'>Matematika Dasar</option>
<option value='mkl001'>Logika dan Pemrograman</option>
</select><br>
</div>
<div class="form-group">
<label>Tahun Ajaran</label>
<select class="form-control" name="kodethnajaran" id="kodethnajaran" required>
<option value="-" selected="selected">-- Pilih --</option>
<option value='thn001'class='mk001'>2017</option>
<option value='thn001'class='mk003'>2017</option>
<option value='thn001'class='mkl001'>2017</option>
<option value='thn002'class='mk003'>2016</option>
</select><br>
</div>
<div class="form-group">
<label>Semester</label>
<select class="form-control" name="kodesemester" id="kodesemester" required>
<option value="-" selected="selected">-- Pilih --</option>
<option value='sem002'class='mk001'></option>
<option value='sem001'class='mk003'></option>
<option value='sem001'class='mkl001'></option>
<option value='sem002'class='mkl001'></option>
<option value='sem002'class='mk003'></option>
</select><br>
</div>
The code above basically contains only my <select>, with data from sql. The script that I tried is:
$("#kodethnajaran,#kodesemester").chained("#kodematkul");
I'm not sure if this is applicable, because I tried to implement it based on this demo:
http://www.appelsiini.net/projects/chained/demo.html
it seems it can only change 'kodethnajaran' but doesnt change 'kodesemester' value.
Here's the fiddle...
https://jsfiddle.net/vu671ubm/
Ok so I investigated a little and the reason why your solution was not working as in example was jQuery version, You should use 1.10 to have chained working
Here goes codePen http://codepen.io/kejt/pen/NdzZqv?editors=1111
Also I have changed your code a little to work on classes
$(".form-control").each(function() {
$(this).chained($("#kodematkul"));
});
The class I have used is just an example, you can add new class for all selects that need to depend on given one. For example dependant-select and add this class to all select which should change on the first one update
Here is a link of js fiddle
[https://jsfiddle.net/7Lcf533c/1/][1]
i make select dropdown read only but when i click on it it shows me the drop down option which should not show and it is changeable
Can you suggest a solution and update that in jsfiddle
You can do it like this:
$("#id_messageKindId option").prop('disabled',true);
use disabled attribute
<div class="col-sm-8"><select class="form-control" id="id_messageKindId" name="messageKindId" disabled="disabled" required="required" readonly="">
<option value="1">Appointment Reminder</option>
<option value="2">Eyeware or Contact Arrival</option>
<option value="3">Appt Delay / Move Up</option>
<option value="4">Appt Cancellation</option>
<option value="5">Recall</option>
<option value="7">After Appointment</option>
<option value="10" selected="selected">Pre Appointment</option>
<option value="11">Lab Results</option>
<option value="12">Collection Message</option>
<option value="13">Custom Message</option>
</select></div>
fiddle at https://jsfiddle.net/7Lcf533c/5/
Hi I want a particular function to be called when anything is selected from a given dropdown. That function needs as an argument the value of the option selected. So far this is what I have got :
<label class="control-label col-lg-3">Action Type</label>
<div class="col-lg-9">
<select class="form-control" id="type" >
<option value="">Please Select</option>
<option value="SCHEDULE" ng-click="getHtml(/*SCHEDULE*/)">
SCHEDULE
</option>
<option value="HTTP" ng-click="getHtml(/*HTTP*/)" >
HTTP
</option>
<option value="RMQ" ng-click="getHtml(/*RMQ*/)">
RMQ
</option>
<option value="WFE" ng-click="getHtml(/*WFE*/)">
WFE
</option>
</select>
</div>
However this does not seem to be working. Can someone please help?
The method is in the controller as:
$scope.getHtml=function(option){
console.log("sent type is: "+type);
var type=$('#type').val();
//BLAH BLAH...
}
You should use ngChange and ngModel directive on select element.
ngChange: Evaluate the given expression when the user changes the input.
Example
<select class="form-control" id="type" ng-model='type' ng-change="getHtml(type)">
<option value="">Please Select</option>
<option value="SCHEDULE">SCHEDULE</option>
<option value="HTTP">HTTP</option>
<option value="RMQ">RMQ</option>
<option value="WFE">WFE</option>
</select>
DEMO
you need to use ng-change here,
first assign a model to select
ng-model="modelName" the modelName is a scope variable which has the value of select box,
second remove the ng-click="getHtml..) from options.
and using ng-change you can call a controller function with the value of modelName variable when the select box changing its value.
<select class="form-control" id="type" ng-change="getHtml(modelName)" ng-model="modelName">
<option value="">Please Select</option>
<option value="SCHEDULE">
SCHEDULE
</option>
.....
</select>