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!
Related
I recently updated to Angular 1.5, but found that it breaks a very corner case testing feature -- we test a page to see if a certain option is selected in an ng-options:
<select name="User" ng-model="userModel" ng-options="user.key as user.name for user in users">
</select>
This produces html like this:
<option value="string:user1" >User1</option>
<option value="string:user2" >User2</option>
If the first option in the list is selected, then there won't be a "selected" attribute. Otherwise it will be there on the option that is selected, like this:
<option value="string:user1" >User1</option>
<option value="string:user2" selected="selected">User2</option>
Is there any way for the "selected" attribute to appear on the first option of the list if it's selected? As far as I can tell, this worked like that back in Angular 1.2 and before, but was changed in 1.2.19. (https://github.com/angular/angular.js/issues/8366)
Is there some workaround, or another attribute I can set?
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.
I have a problem with asp:dropdownlist when I try to change selected value to some thing using jquery after set the value, dropdownlist shows me last value and does not update to new selected value that have been set by me.
I try it(my html code)
<select name="ctl00$cphMain$ddlBankList" id="ddlBankList">
<option value="2">a</option>
<option value="67">b</option>
<option value="85">c</option>
<option value="175">d</option>
<option value="84">e</option>
<option value="86">f</option>
</select>
and to modify html i use this js
$("#<%=ddlBankList.ClientID%> option:selected").removeAttr("selected");
$("#<%=ddlBankList.ClientID%> option[value='67']").attr('selected', 'true');
But dropdownlist does not Jump to 67 value.
use this
$("#ddlBankList").val(67);
JSFIDDLE
You can use Jquery val function directly for select option in dropdown.
$("#<%=ddlBankList.ClientID%>").val('67');
There's this website that I want to change how they display their dropdown menu.
http://i.stack.imgur.com/Wu718.jpg
I wanted to make it so that the default value is "Items for Sale", instead of "Forum Topics"
Here's their source code.
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
Since I don't really care about how it looks, I just want to change the value="topics" to value="s" even without changing the texts.
I've read some tutorials, but they mostly use IDs and Classes as a selector, in this case, how do I target this Select from many other in their website and change the value.
You can use:
$('select[name=sec]').val('s');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
I think this is what you're describing in the comments below:
var dropdown = $('select[name=sec]');
// change the s option to items
dropdown.find('option[value=s]').attr('value', 'items');
// change the topics option to s
dropdown.find('option[value=topics]').attr('value', 's');
// change the dropdown's value to s
// (first option should continue to be selected because its value is now s)
dropdown.val('s');
// (this is for demo purposes only)
dropdown.after($("<div>").text("New HTML is: " + dropdown[0].outerHTML));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
You can use the name or any other attribute.
for css
select[name="sec"]
or jquery
$('select[name="sec"]').
DEMO inspect element from your browser to see the changes
you can select a select dropdown list with select[name=sec] and select the first option with option:first
$('select[name=sec] option:first').val('s');
and if you need to change any of options just use .eq()
$('select[name=sec] option').eq(0).val('s'); // eq(0) for the first option element . eq(1) for the second option element ...
If you want to make selected an other option use this code:
$('select[name="sec"]').find('option:selected').removeAttr('selected');
$('select[name="sec"]').find('option[value="s"]').attr('selected','selected');
This script removes the default selection (the first option) and select the option which has "s" value. For the Demo:
$('select[name="sec"]').find('option:selected').removeAttr('selected');
$('select[name="sec"]').find('option[value="s"]').attr('selected','selected');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
You have to find this element in the DOM. For this you should find the first parent container element of the which has ID or CLASS attribute. From that element you can create a search for the element what you want by using the .find() method.
If there're more element which has name attribute with "sec" value you should build a chain of find which separate that you want. For that you can use these function templates:
$(#CONTAINER_ID).find(.SUBCONTAINER_CLASS).find(ELEMENT_TYPE);
$(#CONTAINER_ID).find(SUBCONTAINER_TYPE).find(OTHER_SUBCONTAINER_TYPE:eq(X));
I've been lurking a bit and couldn't find the answer. Basically I have a bunch of buttons that I want to turn into a drop down menu and have the code be executed onChange. But, I'm new to javascript and I am having a hard time figuring out how this would work. I somewhat got it to work, but I couldn't get it to work with more than one option. Here's what I have:
<button class="lightbutton" onclick="lightswitch(1,true);lightswitch(2,true);lightswitch(3,true);">
All lights on</button>
<button class="lightbutton" onclick="lightswitch(1,false);lightswitch(2,false);lightswitch(3,false);">
All lights off</button>
I got the lights to turn on by doing this:
<form name="functions">
<select name="jumpmenu" onChange="lightswitch(1,true);lightswitch(2,true);lightswitch(3,true);">
<option>LightFunctions</option>
<option value="*";>Light 1 On</option>
<option value="*";>Light 1 Off</option>
</select>
</form>
Now, I see why it works -- it's just telling it that whenever it changes to turn on all the lights. But how do I change the "onChange" to make it so it gets whichever option I have chosen?
I think I'm missing some JS but unsure.
I appreciate the help.
To have that select element control just the first lightswitch you can do this:
<select name="jumpmenu" onChange="lightswitch(1,this.value==='on');">
<option value="on";>Light 1 On</option>
<option value="off";>Light 1 Off</option>
</select>
That is, instead of hardcoding true as the second parameter to lightswitch() test the current value of the select element. (Note that I've changed the value attributes to something more meaningful. The expression this.value==='on' will evaluate to either true or false.)
Within the select's onChange attribute this will refer to the select element itself.
EDIT: To have the same select control multiple parameters you can add some data- attributes to the option elements to store as many extra parameters per option as needed (in this case I think you only need one extra). And I'd move the logic out of the inline attribute:
<select name="jumpmenu" onChange="jumpChange(this);">
<option value="">LightFunctions</option>
<option data-switchNo="1" value="on";>Light 1 On</option>
<option data-switchNo="1" value="off";>Light 1 Off</option>
<option data-switchNo="2" value="on";>Light 2 On</option>
<option data-switchNo="2" value="off";>Light 2 Off</option>
<option data-switchNo="3" value="on";>Light 3 On</option>
<option data-switchNo="3" value="off";>Light 3 Off</option>
</select>
function jumpChange(sel) {
if (sel.value === "") return; // do nothing if user selected first option
var whichLight = +sel.options[sel.selectedIndex].getAttribute("data-switchNo");
lightswitch(whichLight, sel.value==='on');
sel.value = ""; // reset select to display the "Light Functions" option
}
Demo: http://jsfiddle.net/N7b8j/2/
Within the jumpChange(sel) function that I added the parameter sel will be the select element (set as this from the onChange attribute). The "magic" happens on this line:
var whichLight = +sel.options[sel.selectedIndex].getAttribute("data-switchNo");
To explain that line: sel.options[sel.selectedIndex] gets a reference to the currently selected option, and .getAttribute("data-switchNo") gets that option's data- attribute. The + converts the attribute from a string to a number.