I have an html that look like this
<select class="form-control"
name="settings.provider"
id="settings.provider"
ng-model="settings.provider"
required>
<option value="" disabled selected>Select Provider</option>
<option value="thisProvider">thisProvider</option>
</select>
How will I programmatically select "thisProvider" as the selected option?
I tried this but it isn't working:
$scope.settings.provider = "thisProvider";
If your options are not bound with an ng-repeat, you can bind each option to setting in your controller using ng-selected (https://docs.angularjs.org/api/ng/directive/ngSelected). In your controller, you create a boolean like $scope.thisProviderSelected for each option, then set it to true for the option you want selected.
<select class="form-control" name="settings.provider" id="settings.provider"
ng-model="settings.provider" required>
<option value="" disabled selected>Select Provider</option>
<option value="thisProvider" ng-selected="thisProviderSelected">thisProvider</option>
</select>
A better way would probably be use ng-repeat and to add an isSelected to each item in the list. That way if your list changes, you would automatically get any new items.
document.getElementById('settings.provider').value = 'thisProvider';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select class="form-control"
name="settings.provider"
id="settings.provider"
ng-model="settings.provider"
required>
<option value="" disabled>Select Provider</option>
<option value="thisProvider">thisProvider</option>
</select>
Solution 1:
Create Event:
change
JavaScript Function:
function selectItemByValue(elmnt, value){
for(var i=0; i < elmnt.options.length; i++)
{
if(elmnt.options[i].value === value) {
elmnt.selectedIndex = i;
break;
}
}
}
Break out of your loop, once you have found the selected value.
Solution 2:
var Person_ID = 2;
change
Related
Here's my code. Is it possible to empty the value of the first option using jquery/javascript ?
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
so it will become like that:
<option value="">Select category</option>
I already know that i can remove the whole first option by targeting its value
$("#select_1 option[value='0']").remove();
You can use plain javascript to get the first option of a select element using .options like so, which returns an indexed collection, so you can just use zero based index to grab the first option and set it's value property:
document.getElementById("select_1").options[0].value = '';
To target the first element of a collection use :first. Then you can use val('') to remove the value from it:
$('#select_1 option:first').val('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
<script>
$(document).ready(function (){
$('#btnremoveoption').click(function (){
$('#select_1 option:first').remove();
});
});
</script>
<body>
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
<input type="button" id="btnremoveoption" value="Click to Remove all Options" onclick="Remove_options()"/>
</body>
This Program will keep Removing first option when ever button will be click.
$(document).ready(function (){
$('#select_1 option:first').remove();
});
this will remove it onload of the page. without leaving the option blank it will be filled with the next option.
I am trying to send a value to an based on a selection from a dropdown list such as . I want to fetch the value of possiblePhone.id and send it to .
<script>
function copyTextValue() {
var text1 = document.getElementById("source").value;
document.getElementById("destination").value = text1;
}
</script>
<div>
<select th:field="${possiblePhones}">
<option value="0">select phone</option>
<option id="source" onselect="copyTextValue()"
th:each="possiblePhone : ${possiblePhones}"
th:value="${possiblePhone.id}"
th:text="${possiblePhone.model}"></option>
</select>
</div>
<td><input type="text" id="destination"> </td>
For example, if "Samsung" is selected then "1" should be send to the input field and so on. Actually, i do not get any output.
<select id="source" onchange="copyTextValue()">
<option value="0">select phone</option>
<option value="1">samsung</option>
<option value="2">something</option>
</select>
The id="source" attribute should be in <select> element, also change onselect to onchange and move it to <select> element too.
Codepen: https://codepen.io/anon/pen/WVxLpz
You can achieve this by setting the listener to the select element and then query the selected option value.
I made a minimal example with two brands:
<script>
function copyTextValue() {
var e = document.getElementById("select");
var val = e.options[e.selectedIndex].value;
document.getElementById("destination").value = val;
}
</script>
<div>
<select onchange="copyTextValue()" id="select">
<option value="0">select phone</option>
<option value="1">Brand 1</option>
<option value="2">Brand 2</option>
</select>
</div>
<td><input type="text" id="destination"> </td>
one of the simple thing you have to observe here is that you have to capture the event when the dropdown is selected, and pass the current dropdown reference to your method.
<script>
function copyTextValue(selectedOption) {
if(selectedOption.selectedIndex <= 0){
document.getElementById("destination").value = '';
return;
}
var selectedOptionValue = selectedOption.value;
document.getElementById("destination").value = selectedOptionValue;
}
</script>
<div>
<select onChange="copyTextValue(this);">
<option value="0">select phone</option>
<option value="1">select first phone</option>
<option value="2">select second phone</option>
<option value="3">select third phone</option>
<option value="4">select fourth phone</option>
</select>
</div>
<td><input type="text" id="destination"> </td>
here you are also trying to avoid to pass any value to the textbox when the first element is selected. #kryptur's answer is also correct, but this is simpler.
You're using Thymeleaf. For these you to create a form to send you data to the server.
Follow this link for documentation for your exact problems.
https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#creating-a-form
As Frameworks like Thymeleaf usually store state on the server which means you update server first - and then your UI gets updated.
what value return is the value of the select field what you need to do is get the text of selected option i.e
function copyTextValue() {
var selectNode = document.getElementById("source");
enter code here
document.getElementById("destination").value =
selectNode .options[selectNode .selectedIndex].textContent;
}
I have a input type text with datalist that contains duplicate option values
<input type="text" id="my-input" list="data-list">
<datalist id="data-list">
<option value="John" data-id="1"></option>
<option value="George" data-id="2"></option>
<option value="John" data-id="3"></option>
</datalist>
What options i have to get the data-id when i select option. For example if i select the the second John to get 3 as id. I just found this:
$("#data-list option[value='" + $('#my-input').val() + "']").attr('data-id');
but if i chose the second john it returns 1 as id, whitch is incorrect.
You can add an index to duplicate option in datalist. So you should loop through options and in loop select any option in datalist has same value and add index to value attribute of it.
$("datalist option").each(function(){
var sameOpt = $(this).parent().find("[value='"+this.value+"']:gt(0)");
sameOpt.val(function(i, val){
return val+'-'+(sameOpt.index(this)+2);
});
});
$("datalist option").each(function(){
var sameOpt = $(this).parent().find("[value='"+this.value+"']:gt(0)");
sameOpt.val(function(i, val){
return val+'-'+(sameOpt.index(this)+2);
});
});
$("#my-input").change(function(){
var v = $("#data-list option[value='"+this.value+"']").attr('data-id');
console.log(v);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="my-input" list="data-list">
<datalist id="data-list">
<option value="John" data-id="1"></option>
<option value="George" data-id="2"></option>
<option value="John" data-id="3"></option>
<option value="George" data-id="4"></option>
<option value="John" data-id="5"></option>
</datalist>
I think that is just the wrong element for your case. If you want the user to pick an item, you should try a select element. There are lots of solutions for that available.
With that said, you could use the label attribute for the names, and have unambiguous values in value:
<option label="John" value="1"></option>
<option label="George" value="2"></option>
<option label="John" value="3"></option>
That would present all the options for the user, but the actual value they would see after selecting a John would be either 1 or 3, and not John.
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>
I would like to select all drop down to be the same as the value selected from the primary dropdown. I got it to work if there is one select selected from the primary dropdown, but will not work if there are two selects, I have added some code below for your information.
HTML:
<select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();">
<option value="" selected>Select Name</option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
</select>
<select id="Qualifications" name="Qualifications">
<option value="select">select</option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
</select>
<select id="Qualifications" name="Qualifications">
<option value="select">select</option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
</select>
JavaScript:
function setDropDown() {
var index_name=document.QualificationForm.ForceSelection.selectedIndex;
document.QualificationForm.Qualifications.selectedIndex=index_name;
}
Try this
function setDropDown() {
var index_name =
document.getElementsByName('ForceSelection')[0].selectedIndex;
var others = document.getElementsByName('Qualifications');
for (i = 0; i < others.length; i++)
others[i].selectedIndex = index_name;
}
You could possibly use the following, though currently untested:
function setDropDown(el){
if (!el) {
return false;
}
else {
var index = el.selectedIndex,
selects = document.getElementsByName('qualifications');
for (var i=0, len=selects.length; i<len; i++){
selects[i].selectedIndex = index;
}
}
}
This requires that you pass the #ForceSelection select element into the function, and so is called like:
<select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown(this);">
<!-- other stuff -->
</select>
The selectedIndex of this passed-in element will be applied to the other select elements with the name of qualifications.
Also, please allow me to reiterate: an id must be unique within the document in order to be valid HTML.