i have this select, with id category and product. If a choose one option in the select category, the other should list all products in that category.
var json = JSON.parse(xhr.responseText);
console.log('value: '+e.value);
for(var x in json) {
console.log(x+' -> id: '+json[x]['id']);
var all = document.getElementById(target).querySelector("#all");
document.getElementById(target).innerHTML = '';
document.getElementById(target).appendChild(all);
var data = json[x];
if(e.value == '*') {
console.log('add ('+data['id']+', '+data['nome']+')');
var child = document.createElement("option");
child.setAttribute("value", data['id']);
child.innerText = data['nome'];
document.getElementById(target).appendChild(child);
} else {
if(data['categoria'].id == e.value) {
console.log('add ('+data['id']+', '+data['nome']+')');
var child = document.createElement("option");
child.setAttribute("value", data['id']);
child.innerText = data['nome'];
document.getElementById(target).appendChild(child);
}
}
}
<div class="row">
<div class="col-sm">
Category:
<select class="form-control" id="category" data-target="product" th:attr="data-url=#{/produto/listBy.json}" onchange="fill_produtos(this);">
<option value="*">All</option>
<option th:each="option : ${categories}" th:value="${option.id}">
<span th:each="t : ${option.nome}" th:if="${#strings.equals(#strings.substringBefore(t.idioma,','), #strings.replace(#locale,'_','-'))}" th:href="#{/categoria/__${t.conteudo}__}" th:text="${t.conteudo}"></span>
</option>
</select>
</div>
<div class="col-sm">
Produto:
<select class="form-control" id="product">
<option id="all" value="*">All</option>
<option th:each="option : ${produtos}" th:value="${option.id}" th:text="${option.nome}"></option>
</select>
</div>
<div class="col-sm">
Date Range: <input type="date" class="form-control"> a <input type="date" class="form-control">
</div>
</div>
Right now, this is not happening as expected. I have this 3 categories (named one, two and three), each one with 1 product (prod1, prod2 and prod3). I select categories one or two, no products are listed on the other select; if I select category three or all, only the product three are listed on the other select.
Except that the debug code (the console.log) added to the function seems to follow the right path when I click each option on category: if I click one, only the message inside the if(data['categoria'].id == e.value) is shown; same for two and three. If click all, all messages are shown, as expected, due the instruction telling to do so after if(e.value == '*').
Anyone can see what I am doing wrong here? I know I am missing something, but I can't see what is.
Related
This is my code. I am trying to set the value of select tag from database. but it's not working as expected. My requiremnet is value='Auto' then 0th index should be selected else 1sst index should be selected. But its not happening that way. can some one help me?
<div class="form-group">
<label class="medium mb-1" for=""> Select Mode of Update </label>
<select class="form-control" name="avupdatemode" value="<%= data.updatemode %>" >
<option value="Auto" >Auto Update</option>
<option value="Manual">Manual</option>
</select>
</div>
<script>
var sel= document.getElementById('avupdatemode');
if(document.getElementById('avupdatemode').value =='Auto'){
sel.options.selectedIndex = 0;}
else{
sel.options.selectedIndex = 1;
}
</script>
First there is no id attribute on your select.
Second .value will take the value from the selected option and not the value attribute from the select.
So i've added data-value="sAuto" to the select and then done document.getElementById('avupdatemode').dataset.value == 'Auto'
DEMO
var sel = document.getElementById('avupdatemode');
if (document.getElementById('avupdatemode').dataset.value == 'Auto') {
sel.options.selectedIndex = 0;
} else {
sel.options.selectedIndex = 1;
}
<div class="form-group">
<label class="medium mb-1" for=""> Select Mode of Update </label>
<select class="form-control" id="avupdatemode" name="avupdatemode" data-value="sAuto">
<option value="Auto">Auto Update</option>
<option value="Manual">Manual</option>
</select>
</div>
I am getting my backend data in an array to my ejs page.
So I tried this and it worked:
var sos = <%- JSON.stringify(sos) %>;
I iterated the array and based on the value i set my index for the select option.
I want to select any option from the doctors name,
and whatever name is clicked, then the div should load. new div should load for each option selected.
<select
class="docName"
[(ngModel)]="selectedID"
(ngModelChange)="doctorId($event)">
<option disabled> Select Doctor</option>
<option
*ngFor="let name of doctor"
id="{{ name.user_id }}"
[ngValue]="name">
{{ name.doctor_name }}
</option>
</select>
<div>show this data</div>
TScode, for displaying doctor name:
doctorId(doctor_Id) {
this.delete = false;
if (doctor_Id === "All") {
this.doctorID = doctor_Id;
} else {
this.doctorID = doctor_Id.user_id;
}
Just use *ngIf from the CommonModule. Always try to keep it simple.
Example:
<div *ngIf="doctorID">{{doctorID}}</div> // Display what ever you want after a selection was mage
Set your doctorID to undefined or null when no doctor is selected.
I have two select's who uses the same list. When i choose the option "Foo" from select A the same option "Foo" must be hidden on select B. Any ideia how to do it with AngularJS ? I'm trying something like this
<div class="col-md-6">
<label>
Testemunha 1 :
</label>
<select select-normal data-placeholder="..." ng-model="notificacaoOrientativa.testemunha1"
ng-options="obj as obj.pessoa.nome for obj in lstTestemunha">
<option></option>
</select>
</div>
<div class="col-md-6">
<label>
Testemunha 2 :
</label>
<select select-normal data-placeholder="..." ng-model="notificacaoOrientativa.testemunha2"
ng-options="obj as obj.pessoa.nome for obj in lstTestemunha ">
<option></option>
</select>
</div>
$scope.esconderTestemunhaSelecionada = function(obj){
if($scope.lstTestemunha.includes(obj)){
$scope.lstTestemunha.style.display = "none";
return $scope.lstTestemunha;
}
}
You could use a filter on your second select. This will filter the items in the second select such that the item selected in the first does not appear. If you need it to be more complex (for example, this will cause the second select to not have any options until something is selected in the first select which may be an undesirable side effect) you can always write your own custom filter.
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.selectItems = [];
$scope.selectedItemA = {};
$scope.selectedItemB = {};
for (let i = 1; i <= 10; i++) {
$scope.selectItems.push({
id: i,
name: 'Item #' + i
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div>
Select Item A:
<select ng-model="selectedItemA" ng-options="item as item.name for item in selectItems"></select>
</div>
<div>
Select Item B:
<select ng-model="selectedItemB" ng-options="item as item.name for item in selectItems | filter: { id: '!' + selectedItemA.id }"></select>
</div>
</div>
I solved this problem not the way that i'd like but works fine.
<div class="col-md-6">
<label>
Testemunha 1 :
</label>
<select select-normal data-placeholder="..." ng-model="notificacaoOrientativa.testemunha1"
ng-options="obj as obj.pessoa.nome for obj in lstTestemunha">
<option></option>
</select>
</div>
<div class="col-md-6">
<label>
Testemunha 2 :
</label>
<select select-normal data-placeholder="..." ng-model="notificacaoOrientativa.testemunha2" ng-disabled="!notificacaoOrientativa.testemunha1"
ng-options="obj as obj.pessoa.nome for obj in lstTestemunha | filter: {pessoa:{ id: '!' + notificacaoOrientativa.testemunha1.pessoa.id }}">
<option></option>
</select>
</div>
I'm forcing the user to set the first select and filter the second according to the first.
By the way, sry my poor english.
I am working on C#/MVC application with angularJS. I need to display dropdown on popup, If record already have value then by default that value should be selected otherwise default option choose an option.
I am able to bind dropdown and If I debug I am getting correct ng-model value but its displaying blank.
Here is controller code on pop up open click
$scope.ShowAdPopup = function (adId) {
$scope.Popup.CategoryId = 0;
$scope.Popup.InterestId = 0;
$scope.Popup.SourceId = 0;
var filteredData = $filter('filter')($scope.gridAdData, { id: adId }, true);
if (filteredData.length > 0) {
$scope.Popup.Id = filteredData[0].id;
$scope.Popup.AdId = filteredData[0].adId;
$scope.Popup.AdName = filteredData[0].adName;
$scope.Popup.Category = filteredData[0].category;
$scope.Popup.Interest = filteredData[0].interest;
$scope.Popup.Source = filteredData[0].source;
$scope.Popup.AdUrl = filteredData[0].adUrl;
$scope.Popup.CategoryId = filteredData[0].categoryId;
$scope.Popup.InterestId = filteredData[0].interestId;
$scope.Popup.SourceId = filteredData[0].sourceId;
}
$("#divAddGroup").modal({ show: true, backdrop: 'static', keyboard: false });
}
And html is as below
<div class="form-group">
<label class="col-sm-3 control-label">Category</label>
<!--<div class="col-sm-9">
<input type="text" name="category" class="form-control" ng-model="Popup.Category" />
</div>-->
<div class="col-sm-9">
<select class="form-control" name="categoryDrp" ng-model="Popup.CategoryId">
<option value="">-- choose an option --</option>
<option ng-repeat="item in CategoryData" value="{{item.id}}">{{item.categoryName}}</option>
</select>
</div>
Now If I debug and I can see CategoryId setting correct id . e.g. 7 or 8 or 9 which CategoryData have already but its display 'blank' as first option if Id is available
If CategoryId is null then it display '-- choose an option --' which is correct
Try ng-selected="item.id == Popup.CategoryId" as :
<select class="form-control" name="categoryDrp" ng-model="Popup.CategoryId">
<option value="">-- choose an option --</option>
<option ng-repeat="item in CategoryData" value="{{item.id}}"
ng-selected="item.id == Popup.CategoryId">{{item.categoryName}}</option>
</select>
Below is my code,
<div ng-dropdown-multiselect options="master_days_name" selected-model="selected_days_name" ></div>
<select name="end_time" ng-model="PostJobData.facility_hours.end_time" data-bvalidator="required" class="form-control" data-bvalidator-msg="Required">
<option value="">End Time</option>
<option ng-repeat = "val in time_array" value="{{val}}">{{val}}</option>
</select>
Add More
Current Result
Now I want, if user click to add more then this dropdown get repeated, with tuesday, wednesday, saturday, sunday(with uncheck values)
Add more functionality
<div class="row dobBlock" ng-repeat="(hours_key,hours_value) in PostJobData.facility_hours">
<div ng-dropdown-multiselect options="master_days_name" selected-model="selected_days_name" ></div>
</div>
Js code
$scope.PostJobData.facility_hours = [];
$scope.addMoreFacilityHours = function()
{
var temp = {'days':[],'start_time':'', 'end_time':'' };
$scope.PostJobData.facility_hours.push(temp);
console.log($scope.PostJobData.facility_hours);
}
But this giving same array clone means I want to show only uncheck option in second select box how can do this ?
Result