I want to display by default a value from a json which is something like
[{"city":"SURAT"},{"city":"BARODA"},{"city":"AHMEDABAD"},{"city":"MUMBAI"}]
this is came from server. I am store this value in $scope.user_all_city and there is one city is provided to user which is i am stored in this
$scope.user_city = "surat";
now my select tag is something like this
<select ng-model="model.user_all_city" ng-options="rm.city for rm in user_all_city" ng-init="model.user_all_city=user_city">
it is display first value as a blank. it is return to me default city when i am print {{mode.user_all_city}} but it is didn't display as selected option in it.
please help me over here and how to call a function in when i am change the value.
Try using ng-repeat instead of ng-options basically the ng-options is not that much descriptive in angularjs.
<select ng-model="cityName" required>
<option>Select city</option>
<option ng-selected="cityName==city" value="{{city}}" ng-repeat="city in cityList"></option>
</select>
here the required attribute will enusre that select city is highlighted in case of null value. and ng-selected will check if that expression is true and the only that object is selected.The value inseide the model=cityName play the role of selected value here.
Related
If I use readonly, it grey out the dropdown but I am still able to select values and when I click save I am able to see value got fetched in the controller. But if I use disabled, it grey out and select the correct value (so looks good on UI) but when I click save and check my controller, it doesnt fetch the value in controller. I need where user is not able to change anything but value should get fetched in controller.
<div>
<select name="dose" id="dose" class="form-control form-control-sm selective" th:field="*{dose}" th:disabled="disabled">
<option value="">Choose...</option>
<option th:each="dose: ${doses}"
th:selected="${doseSelected == dose}"
th:text="${dose}"
th:value="${dose}">
</option>
</select>
</div>
I want to set re-select option in , I know there is a function to do that for single element using javascript but I use it as an array so I need to set the value inside the loop su as this example:
<select name="days" value = "3">
<option value="1">Sat</option>
<option value="2">Sun</option>
<option value="3">Mon</option>
<option value="4">Tue</option>
<option value="5">Wed</option>
<option value="6">Thu</option>
<option value="7">Fri</option>
</select>
I think this example will work fine with react, but can I use such a code in normal html and javascript inside the loop.
if you have a database store the day value, instead of use if else function, filter the day on select tag to make the option selected as value in database
basically inside foreach there is a select option tags I need to set selected using the value in database like so:
$('#dynamic_field').append('<select><option value="1">Sat</option><option value="2">Sun</option> ..... </select>
Thanks
In the end of the loop:
$('select[name^=day]',item.id).each(function(a,b){ $(b).val(item.day); });
with that will check for each value and set the value in the database as selected in select form
*Note: item.id and item.day came from database
In the selected line [ value bind syntax ] ok?
if so then why I do not get the supplier id when I console it
enter image description here
Here u missed adding v-model to select.
add a variable selectedValue and
update your code like this
console.log(this.selectedValue)
<select v-model="selectedValue>
<option>Select one Value</select>
<option v-for="cat in allCategories" :value="cat.id">{{cat.name}}</option>
</select>
I'm trying to set default selected value for my dropdown list. My code looks like this:
<select v-model="newSelectedUnit" #change="selectUnit(newSelectedUnit)" class="custom-select">
<option v-for="unit in units" :key="unit.id" :value="unit.id" :selected="unit.id == Selectedunit.id">{{ unit.name }}</option>
</select>
but there's no default selected value. I already tried to hardcoded Selectedunit.id to 32712 (which is one of the unit's IDs):
<select v-model="newSelectedUnit" #change="selectUnit(newSelectedUnit)" class="custom-select">
<option v-for="unit in units" :key="unit.id" :value="unit.id" :selected="unit.id == 32712">{{ unit.name }}</option>
</select>
In Chrome inspector there's an <option> tag with value of 32712:
<option value="32712">CYLINDER</option>
but it's not selected by default.
EDIT:
I noticed that there's a problem with selected atribute. In above example, if i set another attribute: :selectedXXX="unit.id == 32712" i've got expected attribute in Chrome dev tools:
<option selectedXXX="true" value="32712">CYLINDER</option>
EDIT2:
If I remove v-model="newSelectedUnit" I've got selected value set correctly! But why?
Use either "#change and :selected" or "v-model", but not both.
Now the v-model on <select> will try to select the unit based on the value in newSelectedUnit
If the initial value of your v-model expression does not match any of the options, the element will render in an “unselected” state.
https://v2.vuejs.org/v2/guide/forms.html#Select
If you are using materialize css template, it's with a
select {
display:none
}
add in your default app css
select: {
display: block
}
it'll appear again!
I'm a pretty novice programmer who is trying to implement something I thought would be pretty simple, but after searching haven't found a solution.
So right now I have an variable called msg. msg is dynamically generated and can be anywhere from 2-999.
I have a select that is very simple:
<form method='post' class='myForm' action=''>
<select name='locationSelect' class='locationSelect' data-param='location_IDNUMBER'>
<option value='1'>Exam Room</option>
<option value='2'>Exam Room 2</option>
<option value='3'>X-Ray Room</option>
<option value='1000'>Check Out</option>
</select>
</form>
My problem is: lets say msg has a value of 3. How can I show the select with a value of 3, so the selected option(the option first visible before clicking the arrow) is X-Ray Room?
my code (taken out of a larger block of code is:
$e.find('.locationSelect').show();
How can I modify it to say something like:
$e.find('.locationSelect':value=msg).show(); //this would show the .locationSelect with the selected value being the one with the id of 3, or whatever msg is
Thanks for any and all help! If you need any more details, just ask!
Try
$e.find('.locationSelect').val(msg);
http://jsfiddle.net/mowglisanu/ktcgy/
You can use $.fn.val(value) to set the selected value of a dropdown.
Note that in case you pass to $.fn.val a value that is not present in the dropdown, the first option will be selected instead.