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.
Related
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.
I want to update my dropdowns based on the main dropdown menu via javascript.
Consider this: there is a main select menu (dropdown) with months, from january to december, and we have 3 other blocks, but in those blocks there is month select, but, in this case they should be selected with the same month that was selected in the main selection. I don't know if I'm clear. If I change the main select, it should be reflected on the other 3.
I don't understand how to begin, because I can put some "onChange" event in the main select to call a javascript function, but I don't know how this javascript code can change the values of the other 3 selects of years in the other 3 blocks of the webpage.
I'm writing from my cellphone because I'm in a train so sadly I don't have any code to share with you, because I just only could make work the "OnChange" event.
Please suggest some solution. Thanks in advance.
You have the correct start.
By listening the changes from the Main selection, get the corresponding field from data to create new options for the child selection.
Here is an example. Hope can help.
let data ={
opt1 : {
child1 : ["opt1-child1-1","opt1-child1-2"],
child2 : ["opt1-child2-1","opt1-child1-2"],
child3 : ["opt1-child3-1","opt1-child1-2"],
},
opt2 : {
child1 : ["opt2-child1-1","opt2-child1-2"],
child2 : ["opt2-child2-1","opt2-child1-2"],
child3 : ["opt2-child3-1","opt2-child1-2"],
}
};
$("#main").on('change',function(){
let main = $(this).val();
console.log(main);
//set child1
$("#child1").html(""); //clean
data[main].child1.forEach(ele => {
$("#child1").append(`<option value="${ele}">${ele}</option>`);
});
//set child2
$("#child2").html(""); //clean
data[main].child2.forEach(ele => {
$("#child2").append(`<option value="${ele}">${ele}</option>`);
});
//set child3
$("#child3").html(""); //clean
data[main].child3.forEach(ele => {
$("#child3").append(`<option value="${ele}">${ele}</option>`);
});
});
<div>
<select id="main">
<option disabled selected>---Pick one---</option>
<option value="opt1">opt1</option>
<option value="opt2">opt2</option>
</select>
</div>
<select id="child1">
<option disabled selected>---choose main first---</option>
</select>
<select id="child2">
<option disabled selected>---choose main first---</option>
</select>
<select id="child3">
<option disabled selected>---choose main first---</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I'm seeking guidance to get me going in the right direction. My professor is at a loss. I'm having issues with the POST in my form for the select2 multiple fields. I have a Yes/No flag, that determines which select 2 select option to show.
The javascript below works great for the show/hide.
$(document).ready(function () {
$('#option').change(function () {
$this = $(this)
$('.select_box').each(function () {
$select = $('select', this);
if ($select.data('id') == $this.val()) {
$(this).show();
$select.show().select2();
} else {
$(this).hide();
$('select', this).hide();
}
});
});
});
My form has a Yes/No/NA option, which dictates what select 2 box to show using the javascript above.
<select name ="option" class="form-control " id="option">
<option value="1"> Yes</option>
<option value="0"> No</option>
<option value="2"> N/A</option>
</select>
My form POST is handled with the general POST option as shown below:
<form action = "{% url 'final' %}" form method = "POST">
Inside my form I have the .select_box div class. The select 2 option gives the correct fields and populates the multi-select correctly.
<div id = "div_yesselect" class="select_box">
<script src= "{% static '/accounts/option_select2.js' %}" type="text/javascript"></script>
<select data-placeholder="Please select your course(s)?" data-id="1" class="js-example-basic-multiple" multiple="multiple" id = "id_courseselect" value = "{{course.id}}" style="width: 1110px" >
{% for course in courses%}
<option value="{{course.name}}" name = "courseid" >{{course.name}}</option>
{% endfor %}
</select>
The POST goes through when the user hits the Submit Button. I can verify all the fields in my form except for the select2 option when a user selects multiple options, or a single option.
<button class="btn btn-primary " type="submit">Submit</button>
In my final view when trying to request the POST on the select2 name it returns an empty set, but everything else in the form returns the correct value. Why doesn't the select2 option post correctly?
courselist = request.POST.getlist('courseid')
Form POST in Django depends on name attributes. When you request courseid, it's going to look for an element with name attribute equal to courseid, meaning:
courselist = request.POST.getlist('courseid')
needs a matching element, for example
<select name="courseid" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
You need to add name attribute to your select element and it should work.
I have an array- selected_players, which I am looping through in Vue.js, but am not able to set the selected attribute of an option.
What I am trying: :selected="player.round.best_player == 1"
Here is the section of the related template:
<div v-if="selected_players.length && ! loading">
<h4>Select Best Player</h4>
<div class="form-group">
<select name="best-player" id="best-player" v-model="best_player" class="form-control">
<option v-for="player in selected_players" :value="player.id" :selected="player.round.best_player == 1">{{ player.name }}</option>
</select>
</div>
<br />
When loaded, this is the related HTML:
<select name="best-player" id="best-player" class="form-control">
<option value="1">Ashley</option>
</select>
How can I achieve this?
To have a selected option, you can just set the best_player as the one you want to have by default selected.
With below code I am iterating over your player array and finding the player which has round.best_player === 1. The idea is to set the best_player with the selected option.
best_player = player.filter(p => p.round.best_player === 1).id
I have select box and have default value is text "please select one", I need solution while if any other option is selected (eq. abc) and user need to clear what he has selected(important is getting default value selected again) with button("Clear and go Next") event.
http://plnkr.co/edit/HIOOHBHaibHmDtiLdGfh?p=preview
<select ng-model="item" ng-options="item.name for item in options"
ng-change="doSomething()">
<option value="">Please select one</option>
</select>
I'm not entirely sure what you're asking, but if you need to clear the selected value, you can do something as simple as:
HTML
<button ng-click="reset()">Clear and move Next</button>
JS
$scope.reset = function() {
$scope.item = "";
}
Plunk