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?
Related
I am attempting to create a form with a select with a bunch of options that are pulled from a database, and also one option that will be a placeholder that will say something like "Choose a title".
The issue I am experiencing is that although the placeholder option is indeed selected and is disabled correctly, it does not display in the actual input list before anyone clicks on it as the selected option.
Required behavior:
Before a user has clicked on the dropdown at all, they should see a dropdown that has the grayed out text of a disabled item that says "Choose a title". When they click on the dropdown, they can then choose from the list of titles that are grabbed from the database.
Current incorrect behavior:
Before a user has clicked on the dropdown at all, they see an empty dropdown menu with nothing written or selected in it. Once they click on the dropdown, it shows that the disabled option is currently selected even though the text doesn't show in the input box (but does in the dropdown), and are able to select one of the non-disabled options that is pulled from the database.
What am I doing wrong here? I've found several things online that tell me to do it the way I have it right now. Here is my code:
<label for="TitleSelector">
What do you want to edit?
</label>
<select name="TitleSelector" id="TitleSelector" v-model="selectedTitle">
<option value="" disabled selected>Choose A Title</option>
<option
v-for="(title, index) in allTitles"
:value="title"
:key="index"
>
{{ title }}
</option>
</select>
I've got it, it works if I v-bind the value of the disabled option like so:
<option :value="null" selected disabled>Choose A Title</option>
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 <select> that loops over an array of data and displays the selections available in the dropdown list.
the markup is like this:
<select required class="form-control btn-primary btn dropdown-toggle"
ng-options="s.name for s in list track by s.name" ng-model="list">
<option selected value=""></option>
<option value="" ng-click="">Split</option>
</select>
What I want is, to have the preselected value as an empty string, I achieved that with:
<option selected value=""></option>
but then I need a second custom <option> tag besides all the <option> tags that get generated by the ng-option,
in this tag I need to show a string, in this case "split", and there will be a ng-click on this option so the user can click on it and a second dropdown will appear.
The problem is the second <option> tag it's not shown, only the first one, and I did some tests, and apparently I can show only one option tag besides the ones from ng-option.
Is there a solution for this?
What I need as end result is my option list generated by ng-option,
then a preselected option that is EMPTY (it shows when the user loads the page), and a second option with a custom string that will be used like a button.
Here a jsfiddle where you can see that the second custom option tag isnt shown
https://jsfiddle.net/0xyt24sh/10/
thank you
It's impossible to have more than one hard-coded option with ngOptions, as explicitly mentioned in the documentation:
Optionally, a single hard-coded element, with the value set
to an empty string, can be nested into the element. This
element will then represent the null or "not selected" option.
A workaround might be to use ngRepeat:
<select class="form-control btn-primary btn dropdown-toggle" ng-model="selection">
<option value="" selected></option>
<option ng-repeat="s in list">{{s.name}}</option>
<option ng-click="" value="split">Split</option>
</select>
Updated fiddle: https://jsfiddle.net/0xyt24sh/17/
From ngOptions documentation:
Optionally, a single hard-coded element, with the value set to an empty string, can be nested into the element. This element will then represent the null or "not selected" option. See example below for demonstration.
In this case, ngOptions isn't fit for your problem; Instead, you can use <option>s with ng-repeat, as such:
<select required class="form-control btn-primary btn dropdown-toggle" ng-model="selected">
<option selected value=""></option>
<option ng-repeat="item in list track by item.code">
{{item.name}}
</option>
<option value="split" ng-click="doSomething()">Split</option>
</select>
Working JSFiddle here
Below is my markup, i have empty option included in my markup
<select name="drop_down" id="drop_down" class="single">
<option></option>
<option value="First Choice">First Choice</option>
<option value="Second Choice">Second Choice</option>
<option value="Third Choide">Third Choide</option>
</select>
Any my js is like
$('.single').chosen({allow_single_deselect:true});
but i don't see blank option in drop-down after initialization, am I doing something wrong?
This normally happens if you are using a dynamic dropdown. The deselect will work fine after initialization. Once you empty the dropdown and fill it with new values and chosen:update it. You won't see the chosen allow_single_deselect option not working. If anyone looking for invisible chosen deselect option
Refer: https://github.com/harvesthq/chosen/issues/1780
You need to add an empty option tag before you fill the drop-down will new values. If you miss an empty <option> before the actual drop-down values you will not see the deselect cross mark icon.
$('#natureInput').chosen({
allow_single_deselect:true,
width: '50%'
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<link href="https://harvesthq.github.io/chosen/chosen.css" rel="stylesheet" />
<label for="natureInput">Nature</label>
<select data-placeholder="Choose a nature" name="nature" id="natureInput">
<option />
<option>Spring</option>
<option>Winter</option>
<option>Summer</option>
</select>
I know this post is old, but if any one still not able to figure this out. Here's what you need to do.
Documented: https://harvesthq.github.io/chosen/options.html
When set to true on a single select, Chosen adds a UI element which
selects the first element (if it is blank).
<select class="chosen">
<option value=""></option> <!-- required -->
<option value="Batman">Batman</option>
...
</select>
$(document).ready(function(){
$(".chosen").chosen({
allow_single_deselect: true
});
});
Missing 'x'?
Make sure you have included the sprites in the 'same location'.
chosen
|-- styles
| |-- chosen.jquery.min
| |-- chosen.min.css
| |-- chosen-sprite.png // image
| |-- chosen-sprite#2x.png // image
I would try to make the option not really empty but leave some whitespace in it, or even something like '(none)' or '(choose one).'
oops my bad, the path to sprite image that shows close button on select was not correct due to which close button (cross symbol) was not displayed on drop-down and felt like blank is not working
I have not used the Chosen plugin before but I looked at the website, the very first example has an empty option and the Chosen function gets rid of it when called. Also the allow_single_deselect option says that it will "add a UI element for option deselection" which doesn't mean it preserves empty options.
Make sure you have an empty option both before and after updating the chosen.
Example:
//html
<select class="consultant_refer"><option></option></select>
//initialize
$('.consultant_refer').chosen({width: '100%', allow_single_deselect: true})
//empty select but make sure to add another empty option
$('.consultant_refer').empty().append('<option>')
//add other options
consultants.forEach(function (data) {
$('.consultant_refer').append($('<option>').val(data.id).text(data.name))
})
$('.consultant_refer').trigger('chosen:updated')
there are two option controls in a website:
<select class="operator" name="operator" id="operator">
<option value="0">Entekhab Operator</option>
<option value="1">Irancell</option>
<option value="2">Talia</option>
<option value="3">HamraheAval</option>
</select>
<select class="card" name="chargeCard" id="chargeCard">
<option value="0">Entekhab Sharj</option>
</select>
When a user changes the first one by clicking on that (and selecting an option), the second one will also change...as you see in the above code, the second option has no value and will get some values after clicking on the first one
My problem is that I have to change them via javascipt in my android program
I tried with the following:
document.getElementById("operator").value=2
and this way i changed the first one.
But the second one does not change and dose not get values! What should I do for the second option to change as well?
maybe i didnt explain my question very well. i changed the value of the option but i needed something like stimulating the change event.
this code solved my problem:
$('#operator').trigger('change');