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>
Related
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
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 have a dropdownlist with a list of countries (all countries)
<select id="Country" onchange="country();">
<option id="3">Japan</option>
<option id="4">Canada</option>
<option id="5">France</option>
<option id="6">Peru</option>
</select>
I have the form in a modal that i want get country value from.
<input id="seachcountry" type="text" class="form-control" name="country">
I have written a JQuery line to get the value from the modal form to the page fields, everything works great but the country select fields are not changing the value.
$("#seachcountry").val($("#modalform").val()).trigger("change");
thank you for your suggestions!
This will work for you:
Just inject the value of the <input> to <select>.
I have created a snippet for you.
var Tval = $('#seachcountry').val();
$('#Country').val(Tval);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Country" onchange="country();">
<option id="3">Japan</option>
<option id="4">Canada</option>
<option id="5">France</option>
<option id="6">Peru</option>
</select>
<input id="seachcountry" type="text" class="form-control" name="country" value="France">
Try this.
function country() {
$("#seachcountry").val($(this).val());
}
For changing value in any select you just need send exist value from this select. In your select options have only ids, but not have value attribute. So if you add value equal to id to change value in the your form to "France" need run following:
$("#selectId").val(5)
Instead of 5 you can obtain value from any other field or else.
If you want set your value to input field when changed in select, you need attach listener that will do all work. It will looks like this:
$("#selectId").on("change", function(){
$("#inputFieldId").val($(this).find(":selected").text());
})
This will set displayed value to select, to set real value just write instead $(this).find(":selected").text() this $(this).val()
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.
Hi I have tried below code to reset number of "adults" dropdown field on onclick of reset button but the dropdown field is not getting reset please suggest
Code for adult dropdown :
<select class="select_style sel_ad_{$smarty.section.sect.iteration}" id="adult[]"
name="adult[]"
onchange="javascript:display_twin('{$smarty.section.sect.iteration}',this.value)">
<option value="0"> - </option>
{section name=adult loop=10 start=1 step=1}
<option value="{$smarty.section.adult.index}" {if $adults_details.$sect_key eq
$smarty.section.adult.index}selected{/if}>{$smarty.section.adult.index} </option
{/section}
</select>
Javascript code for reseting fields onclick of reset button :
function reset_frm(){
$("#adults_pkg").val('');
//$("select[name='adults_pkg[0]']").val('');
}
You are passing wrong id.
To use existing code:
$('#adult\\[\\]').val('');
OR
Add a new class to the element:
<select class="pkgCls select_style sel_ad_{$smarty.section.sect.iteration}" id="adult[]"
name="adult[]"
onchange="javascript:display_twin('{$smarty.section.sect.iteration}',this.value)">
And apply this:
$(".pkgCls").val('');
Default mean selected first option of select value, as you have have 0 value on first index so you will need to assign 0 for default index
And selector seems wrong, support the select box inside loop so use right selector like
$(".sel_ad_{$smarty.section.sect.iteration}").val('0');
Try with -
$("yourSelectMenu").prop('selectedIndex',0);