I am trying to get only the checked names in a list of names. Here is my code model:
<select ng-model="selectTopic" ng-change="changedTopic(selectTopic)" ng-options="option as option for option in topics">>
<option value="" disabled>Select a Subject</option>
</select>
<select ng-model="selectDept" ng-change="changedDepartment(selectDept)" ng-options="option as option for option in department">
<option value="" disabled>Select a Department</option>
</select>
<select ng-model="selectUser" ng-options="option as option for option in users" multiple="multiple">
<option value="" disabled>Select a User</option>
</select>
I want to get the selected topic, department, and users. I am currently using: console.log($scope.topics + $scope.departments + $scope.users) but it returns everything. I just want to return the selected items.
Can anyone help me out?
You have to print the ng-models , not the arrays:
console.log($scope.selectTopic);
console.log($scope.selectDept);
console.log($scope.selectUser);
Hope it helps =)
use one object for the model in your form , then you have all the user input in that one object which makes it simple to send to server or to reset form
$scope.userInput={}
<select ng-model="userInput.selectTopic" ng-change="changedTopic(userInput.selectTopic)" ng-options='...'>
<select ng-model="userInput.selectDept" ng-change="changedDepartment(userInput.selectDept)" ng-options='...'>
to see this working put the following in your view temporarily
<pre>{{userInput|json}}</pre>
Related
I need to map to an array the selected options inside select element (multiple selection is enable).
Here is the html:
<select id="listado" size="5" multiple>
<option value="Leer" id="aficion-leer">Leer</option>
<option value="Programar" id="aficion-programar">Programar</option>
<option value="Cine" id="aficion-cine">Cine</option>
<option value="Deporte" id="aficion-deporte">Deporte</option>
</select>
I tried this:
Array.from(document.querySelector("#listado")).map(elemento => elemento.value); which returns every option. According to this answer, adding option:checked to the query param should do the trick, but I get an empty list.
Any idea on what the reason might be?
You can use document.querySelectorAll and only select options that are checked, then map them.
let options=[...document.querySelectorAll("#listado option:checked")].map(elemento => elemento.value)
console.log(options)
<select id="listado" size="5" multiple>
<option value="Leer" id="aficion-leer">Leer</option>
<option value="Programar" id="aficion-programar" selected>Programar</option>
<option value="Cine" id="aficion-cine">Cine</option>
<option value="Deporte" id="aficion-deporte" selected>Deporte</option>
</select>
Have you tried this?
console.log(
Array.from(document.querySelector("#listado").childNodes).filter(elemento => elemento.selected).map(elemento => elemento.value) // this line
);
<select id="listado" size="5" multiple>
<option value="Leer" id="aficion-leer">Leer</option>
<option value="Programar" id="aficion-programar" selected>Programar</option> <!-- selected for demo -->
<option value="Cine" id="aficion-cine">Cine</option>
<option value="Deporte" id="aficion-deporte">Deporte</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
I've got a Angular 2 form with a static select menu
<select formControlName="type" name="type">
<option value="reference">Referentie</option>
<option value="name">Aanhef</option>
<option value="street">Street</option>
<option value="postcode">Postcode</option>
</select>
How can I set the first as the selected value. What ever I do it turns up blank.
I've tried:
<option selected...
<option selected="selected"...
<option [selected]="selected"...
<option [selected]="reference"...
this.searchform.value.type = 'reference';
Hope someone can help.
this.searchform.controls['type'].setValue('reference')
<option value="name" selected>Aanhef</option>
works. You can refer
Plunkr
EDIT: post the question and magically it starts working :/ Maybe because I removed the alert?
So I have a dropdown selector that is supposed to represent the default for a set of dropdown selectors that make up a country list.
Here is one of the many code permutations I tried:
$("#edit-ip-ban-setdefault").change(function () {
var selected = this.selectedIndex
$(".form-type-select").each(function() {
$('.form-select').attr('selectedIndex', selected);
$(".form-select").val(selected).change();
});
});
Here is the relevant HTML for the default dropdown:
<select class="form-select valid" name="ip_ban_setdefault" id="edit-ip-ban-setdefault" selectedindex="1">
<option value="0"></option>
<option value="1"> Read Only </option>
<option selected="selected" value="2"> Complete Ban </option>
</select>
And here is the HTML for one of the many dropdowns I wish to have updated on change:
<div class="form-item form-type-select form-item-ip-ban-AF">
<select class="form-select valid" id="edit-ip-ban-af" name="ip_ban_AF">
<option selected="selected" value="0"></option>
<option value="1">Read Only</option>
<option value="2">Complete Ban</option>
</select>
</div>
I'm using jQuery 1.7, but ideally the solution would work for 1.5 to 1.10.
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>