I have one select, but the default option "Primeiro filtro" don't show:
My template:
<div class="select">
<select [(ngModel)]="controlaRadios" name="tipoDoProdutoName" class="select-text">
<option class="dropdown-item" disabled selected value>Primeiro filtro</option>
<option value="1" class="dropdown-item">Todos</option>
<option value="2" class="dropdown-item">Tipo de anúncio</option>
</select>
<span class="select-highlight"></span>
<span class="select-bar"></span>
</div>
TS:
controlaRadios: any = "Primeiro filtro"
Take a look here and try to adapt. Hope this helps.
.html
<select class="form-control" type="text" [(ngModel)]="selectedType">
<option *ngFor="let type of types" [ngValue]="type">{{type}}</option>
</select>
.ts
types: Array<Object> = ['Default option', 'First option', 'Second option']
selectedType = this.types[0];
Try this. Hope it will work for you :)
<select [(ngModel)]="controlaRadios" name="tipoDoProdutoName" class="select-text">
<option value="Primeiro filtro" class="dropdown-item">Primeiro filtro</option>
<option value="1" class="dropdown-item">Todos</option>
<option value="2" class="dropdown-item">Tipo de anúncio</option>
</select>
<span class="select-highlight"></span>
<span class="select-bar"></span>
</div>
Related
I am a backend developer so I need help with this front end part.
<input id="entered_value" type="number" name="entered_value">
<input id="entered_valuetwo" type="text" name="entered_valuetwo">
<select id="selected_value" name="selected_value"> <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type="button" id="send-data">Click me</button>
when the button is clicked its already triggering something I have in JS. But what is the best way to pass "entered_value" & "entered_valuetwo" & "selected_value" all 3 at the same time to the button and they get passed to the js function thereafter.
just add this to your js
document.getElementById('send-data').addEventListener('click',buttonFunction)
function buttonFunction(){
let enteredValue = document.getElementById('entered_value').value
let enteredValue2 = document.getElementById('entered_valuetwo').value
let selectValue = document.getElementById('selected_value').value
console.log(enteredValue,enteredValue2,selectValue)
}
<input id="entered_value" type="number" name="entered_value">
<input id="entered_valuetwo" type="text" name="entered_valuetwo">
<select id="selected_value" name="selected_value"> <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type="button" id="send-data">Click me</button>
If you want to put it into a databas i would use post request like this:
<form action="your url" method="Post">
<input id="entered_value" type="number" name="entered_value">
<input id="entered_valuetwo" type="text" name="entered_valuetwo">
<select id="selected_value" name="selected_value">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type="button" id="send-data">Click me</button>
</form>
But if you want to use it temporarylie use document.getElementby(𝗜𝗗) or better document.querySelector(#𝗜𝗗)
I've been attempting to collect the selected data value of each of the dropdowns in a form and pass them into an array so that I can eventually add them together. However with my current code, the array only receives the value of the first dropdown, and not any of the others. I haven't got to the addition part yet, so I'm just joining the array with a comma, but here's my code so far:
HTML
<form id="questions">
<select name="q1" id="q1" tabindex="1">
<option data-calculate="0" value="No">No</option>
<option data-calculate="0.5" value="Partially">Partially</option>
<option data-calculate="1" value="Yes">Yes</option>
</select>
<select name="q2" id="q2" tabindex="2">
<option data-calculate="0" value="No">No</option>
<option data-calculate="0.5" value="Partially">Partially</option>
<option data-calculate="1" value="Yes">Yes</option>
</select>
<select name="q3" id="q3" tabindex="3">
<option data-calculate="0" value="No">No</option>
<option data-calculate="0.5" value="Partially">Partially</option>
<option data-calculate="1" value="Yes">Yes</option>
</select>
<input type="hidden" id="calculator" value=""/>
</form>
JQUERY
var calculation = [];
jQuery("#questions").change(function() {
calculation.push(jQuery(this).find(":selected").data('calculate'));
jQuery("#calculator").val(calculation.join(', '));
});
Thanks in advance for the help!
Consider the following.
$(function() {
$("#questions > select").change(function(event) {
var calc = [];
$("#questions > select").each(function(i, el) {
calc.push($(el).val());
});
$("#calculator").val(calc.join(", "));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="questions">
<select name="q1" id="q1" tabindex="1">
<option data-calculate="0" value="No">No</option>
<option data-calculate="0.5" value="Partially">Partially</option>
<option data-calculate="1" value="Yes">Yes</option>
</select>
<select name="q2" id="q2" tabindex="2">
<option data-calculate="0" value="No">No</option>
<option data-calculate="0.5" value="Partially">Partially</option>
<option data-calculate="1" value="Yes">Yes</option>
</select>
<select name="q3" id="q3" tabindex="3">
<option data-calculate="0" value="No">No</option>
<option data-calculate="0.5" value="Partially">Partially</option>
<option data-calculate="1" value="Yes">Yes</option>
</select>
<input type="hidden" id="calculator" value="" />
</form>
Each change to a select element triggers the callback. Making a more global variable will cause it to get updated over and over again if the User makes many changes or changes their selection. This will capture all 3 values and join them. If the user changes a selection, the hidden field is updated with just the values currently selected.
<div>
<label for="sort">sort</label>
<select name="sort" id="sort" class="form-control">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div>
<label for="label">label</label>
<select name="label" id="label" class="form-control">
<option value=""></option>
<option value="label1">label1</option>
<option value="label2">label2</option>
</select>
</div>
There is a search function, so when I choose the sort and label select box then click the search button, it will sort data. But the selected value is not set in the select box.
How can I solve this? Please help me to solve this.
Add any event to get the selected dropdown value. Below, I have added a select change event.
$("#label").on("change", function(){
//get the data using the above ID's
var cars = ["Saab", "Volvo", "BMW"]; //example array
//appending to the new Select #newData
var htmlContent = "";
htmlContent = "<option value=''></option>";
$.each( cars, function( i, val ) {
$( "#" + val ).text( "Mine is " + val + "." );
htmlContent += "<option value= "+val+">"+val+"</option>";
});
$("#newData").append(htmlContent);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label for="sort">sort</label>
<select name="sort" id="sort" class="form-control">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div>
<label for="label">label</label>
<select name="label" id="label" class="form-control">
<option value=""></option>
<option value="label1">label1</option>
<option value="label2">label2</option>
</select>
</div>
<div>
<label for="newData">New Data</label>
<select name="newData" id="newData" class="form-control">
</select>
</div>
The selectField in my typescript doesn't shows the default value, when I run the server. I need "select" (the default value) whenever I run the server.
In my code the line "option value="none" selected " doesn't work.
<div class="form-group">
<label class="label label-default" for="tour-type">Tournament Type</label>
<select class="form-control" name="TournamentType" [(ngModel)]="tourDetails.TournamentType">
<option value="none" selected>Select</option>
<option value="PSA">PSA</option>
<option value="NationalCircuit">National Circuit</option>
<option value="StateClosed">State Closed</option>
<option value="Asian&World">Asian & World</option>
<option value="International">International</option>
<option value="NonRanking">Non-Ranking</option>
</select>
</div>
Set tourDetails.TournamentType to none in ngOnInit()
ngOnInit()
this.tourDetails.TournamentType ="none"
}
tourDetails.TournamentType needs to be equal to "none" so that it gets selected automatically.
otherwise you can do the following
<option value="" selected>Select</option>
Html Code
<select class="form-control" id="txtcity" data-ng-model="Register.city" ng-options="item for item in dtcmbCity">
<option value="">Please Select</option>
</select>
<button type="button" ng-click="btnSet();">Set Item</button>
Js Code
$scope.Register = {city: ''};
$scope.dtcmbCity = ['Delhi','Bombay','Chennai'];
$scope.btnSet= function () {
$scope.Register.city = "Delhi"
}
My problem is when load the form the data (delhi,bombay,chennai) displayed in the select box. and then i click the set button i want to set delhi into the selection box.
thanks please help
if you are looking for setting the value attribute in the options fields same as the text value than this can help you.
Your current code .
ng-options="item for item in dtcmbCity"
Result HTML.
<select class="form-control ng-pristine ng-valid ng-touched" id="txtcity" data-ng-model="Register.city" ng-options="item for item in dtcmbCity">
<option value="" class="" selected="selected">Please Select</option>
<option label="Delhi" value="string:Delhi">Delhi</option>
<option label="Bombay" value="string:Bombay">Bombay</option>
<option label="Chennai" value="string:Chennai">Chennai</option>
</select>
if you use the track by in ng-options , html code is
ng-options="item for item in dtcmbCity track by item"
Result HTML.
<select class="form-control ng-pristine ng-valid ng-touched" id="txtcity" data-ng-model="Register.city" ng-options="item for item in dtcmbCity track by item">
<option value="" class="" selected="selected">Please Select</option>
<option label="Delhi" value="Delhi">Delhi</option>
<option label="Bombay" value="Bombay">Bombay</option>
<option label="Chennai" value="Chennai">Chennai</option>
</select>
Setting the value on button click is working fine.