I have this drop-down list in my angular code:
<div class="btn-group" dropdown>
<select class="selected_location" ng-options="perlocation.id as perlocation.name for perlocation in locations" ng-model="cleaningServiceLocation">
<option value="">Please Select Location</option>
</select>
<div>
Now in my controller I can easily call the selected value as:
$scope.cleaningServiceLocation
How can I get the text, or in my case, the name of the selected location?
You can make model (perlocation) as object instead of (perlocation.id)-
<select class="selected_location" ng-options="perlocation as perlocation.name for perlocation in locations" ng-model="cleaningServiceLocation">
And access it as -
$scope.cleaningServiceLocation.name
The easy way would be to loop through the locations array every time the value changes and grab the name property from the location whose id matches $scope.cleaningServiceLocation:
$scope.getName = function(id) {
for (var i = 0; i < $scope.locations.length; i++) {
if ($scope.locations[i].id == id) {
return $scope.locations[i].name;
}
}
return "";
}
Try it in a Plunker.
Related
I'm trying to select a drop-down value using js. In my case, I need to select "DRAW PORTRAIT" drop-down option after the plugin loads.
I tried two methods but I'm not getting anywhere. This is a part of the frontend found in Bookly WordPress plugin. I added an id id="category" to the dropdown so that I can select a value.
HTML:
<div class="bookly-js-chain-item bookly-table bookly-box" style="display: table;">
<div class="bookly-form-group">
<label>Service Type</label>
<div>
<select id="categorydraw" class="bookly-select-mobile bookly-js-select-category">
<option value="">Select category</option>
<option value="6">DRAW PORTRAIT</option>
<option value="7">DRAW DUMMY FIGURE</option>
<option value="8">DESIGN WAX SCULPTURE</option></select>
</div>
</div>
</div>
Method 01
document.getElementById("categorydraw").value = "DRAW PORTRAIT";
Method 02
var objSelect = document.getElementById("categorydraw");
setSelectedValue(objSelect, "DRAW PORTRAIT");
function setSelectedValue(selectObj, valueToSet) {
for (var i = 0; i < selectObj.options.length; i++) {
if (selectObj.options[i].text== valueToSet) {
selectObj.options[i].selected = true;
return;
}
}
}
Please see the full code where the js doesn't work: https://jsfiddle.net/3z5hcv62/
I would really appreciate if someone can correct my cranky code. Thanks in advance!
One line of jQuery will allow you to select the item necessary:
$('#categorydraw option[value="7"').prop("selected", true);
https://jsfiddle.net/fLc1p5mq/
Edit: In order to activate on a WordPress page load, use:
jQuery( document ).ready(function() {
jQuery('#categorydraw option[value="7"').prop("selected", true);
});
First, i want to make sure. Do you want to select the value of the dropdown or set the value to the dropdown?. Maybe this will help your problem.
HTML
<!-- I set the "categories" id to the dropdown -->
<select class="bookly-select-mobile bookly-js-select-category" id="categories">
<option value="">Select category</option>
<option value="1">Cosmetic Dentistry</option>
<option value="2">Invisalign</option>
<option value="3">Orthodontics</option>
<option value="4">Dentures</option>
</select>
<p>
Selected value: <strong id="selected"></strong>
</p>
JavaScript
var dropdown = document.getElementById('categories');
var datas = [];
var select = 3;
/* Get value with text from dropdown */
for(var i=0;i<dropdown.options.length;i++) {
datas.push({
id: dropdown.options[i].value,
text: dropdown.options[i].text,
});
}
/* For set the value */
dropdown.value = select; // after page loaded,, default value will selected is "Orthodontics"
/* For select current value with the text */
var dataSelected = datas[select];
document.getElementById('selected').innerHTML = "ID: "+dataSelected.id+", TEXT: "+dataSelected.text;
The result will show like this https://jsfiddle.net/65jnzLko/1/
You can improve that code. Like selecting datas by id of the dropdown value.
Or if you just want to set the value for your dropdown, you can do this
// using pure js
document.getElementById('yourdropdown').value = 3 // or other values
// using jquery
$("#yourdropdown").val(5) // 5 can replace with other values
Is there a way to use something like $(".class").change(function(){ or $("#id").change(function(){, but to change the value the value attribute of an option element like so?
<select>
<option value="changeThis">opt</option>
</select>
I'm using a for loop to generate each option of a select list from a relational database, so I need to have a function to automatically increment the value so they're unique.
New code:
<div class="facilitySelection">
<select name="Facility" class="form-control">
<option selected disabled>Select a facility...</option>
#{
var i = 1;
foreach (var item in Model)
{
<option value="#i">#Html.DisplayFor(modelItem => item.FacilityName</option>
i++;
}
}
</select>
</div>
Newer code:
I have a table of Facilities, with an ID and Name field. Now using a foreach loop to use the ID directly from the database rather than generating the number from a variable in the script block, to ensure the ID and Name from the database line up correctly.
<div class="facilitySelection">
<select id="Facility" name="Facility" class="form-control">
<option selected disabled>Select a facility...</option>
#{
foreach(var f in ViewBag.Facilities)
{
<option value="#f.Id">#f.Name</option>
}
}
</select>
</div>
You change attributes with the attr function:
$("selector-for-the-option").attr("value", "new value");
You can also use prop because the value of an option element has a reflected property called value (unlike input elements, where the value property is not the reflected property for the value attribute):
$("selector-for-the-option").prop("value", "new value");
In my SPA site I dynamically adding several select (dropdown list \ combo-boxes) tags to the page.
What I need to do is to check which one of them have only one option (empty string as option caption doesn't count) and for those select them by default.
I also use Knockout binding and need the selected value to be properly bind to the correlated variable .
For example, if those are the select tags:
<div>
<select for="required" data-bind="options: list1, value: val1, optionsCaption: ''">
<option value=""></option>
<option value="1">One</option>
</select>
</div>
<div>
<select for="required" data-bind="options: list2, value: val2, optionsCaption: ''">
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
The code should automatically pick the only option in the first select.
I tried using this code:
var chooseDefaultValues = function() {
var relevantComboBoxes = $("select[for='requiredComboBox']");
for (var i = 0; i < relevantComboBoxes.length; i++) {
var currentComboBox = relevantComboBoxes[i];
if (currentComboBox.disabled) continue; //Skip disabled combo-boxes
if (currentComboBox.length === 1) { //If there is only one child, select it
currentComboBox.selectedIndex = 0;
}
if (currentComboBox.length === 2) { //If there are twon childern:
if ($(currentComboBox.firsChild).text().trim() === "") { //If the first one is the empty option caption pick the second child
currentComboBox.selectedIndex = 1; //As it is the only choice there is
}
}
}
The problem is that it shows in the select box the right value, but it doesn't populate the binded variable.
I also tried to replace the line:
currentComboBox.selectedIndex = 0
by
currentComboBox[0].click()
But it didn't help...
Your help will be appretiate :)
I have the following select list from which the user can select multiple values.
<select name="valumethod1[]" id="valumethod1[]" onBlur="validatevalumethod()" size="6">
<option value ="t1">test1</option>
<option value ="t2">test2</option>
<option value ="t3">test3</option>
<option value ="t4">test4</option>
</select>
I want to fetch the selected values in JavaScript, but I don't know how to do this. Please help me.
Try something like this :
var ob = document.getElementById('valumethod1[]');
var selected = new Array();
for (var i = 0; i < ob.options.length; i++) {
if (ob.options[ i ].selected) {
selected.push(ob.options[ i ].value);
}
}
The array selected is then an array of selected options. Working example here
Note: you need to add multiple="multiple" to your select list as an attribute
I want to loop over a Dropdownlist and write the value of the selected Item in a label.
I've done it before with a selection of Radio buttons but with the dropdownlist it won't work.
Now, some Code.
Here is the generated HTML Code Values are not interesting.
<select id="alternativeNumbers" name="alternativeNumbers">
<option value="1_A">Text</option>
<option value="2_B">Text</option>
<option value="3_C">Text</option>
<option value="4_D">Text</option>
<option value="5_E">Text</option>
<option value="6_F">Text</option>
</select>
The Code to bind the event to the Dropdownlist.
$(function () {
var dropdown = document.getElementsByName("alternativeNumbers");
$(dropdown ).change(function () {
updateAlternativeDropdown();
});
});
And finally the method which is called by the event. This should fill the labels.
function updateAlternativeDropdown() {
var dropdown = document.getElementsByName("alternativeNumbers");
var lengthDropDown = addAlternativeArticleNumberDropdown.length;
for (var i=0; i < lengthDropDown; i++)
{
//This alert is for the behavior of the output!
alert(addAlternativeArticleNumberDropdown[i].value);
if (addAlternativeArticleNumberDropdown[i].selected) {
var valueOfDropdown = addAlternativeArticleNumberDropdown[i].value;
var splittedValues = valueOfDropdown.split("_");
document.getElementById("label1").innerText = splittedValues[0];
document.getElementById("label2").innerText = splittedValues[1];
}
}
};
I hope this is enough information, now the Problem / Current behavior:
The method updateAlternativeDropdown() is called fine but then the alert inside the loop returns the value of first element, value of the selected element and this 3 times. (I guess because of the 6 elements in this element)
Furthermore because of this my if-statement isn't entered. Currently I#m kind of clueless where this problem comes from.
Thanks in advance.
You don't have to iterate dropdown's options. You can access selected option like this:
dropdown.options[dropdown.selectedIndex].value
Update your updateAlternativeDropdown function:
function updateAlternativeDropdown() {
var dropdown = document.getElementById("alternativeNumbers"),
splittedValues = dropdown.options[dropdown.selectedIndex].value.split('_');
document.getElementById("label1").innerHTML = splittedValues[0];
document.getElementById("label2").innerHTML = splittedValues[1];
}
$('#alternativeNumbers').change(updateAlternativeDropdown);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
label1: <span id="label1">-</span><br />
label2: <span id="label2">-</span><br />
<select id="alternativeNumbers" name="alternativeNumbers">
<option value="1_A">Text</option>
<option value="2_B">Text</option>
<option value="3_C">Text</option>
<option value="4_D">Text</option>
<option value="5_E">Text</option>
<option value="6_F">Text</option>
</select>
working Example