I have a select box.
When no value is selected, I have the empty option --. It's OK !
Once an option is selected, the empty option disappears.
But I would like that it is always there to have the opportunity to choose --.
Is it possible ?
<select ng-model="project" ng-options="act.id as act.name for act in actors"></select>
please see here:http://plnkr.co/edit/SWpRZA1dafNNva70z6KE?p=preview
<select ng-model="project" ng-options="act.id as act.name for act in actors">
<option value="">--<option>
</select>
ng-options gets priority when any option is selected from .
As per the standard html can contain . Thus the mentioned option gets priority as the selection is null.
And in view, html priority is higher, thus always value is seen unless the ng-option value already selected from controller.
Related
I have a scenario where i need to display options in dropdown with binded value and some text prefix to it
html:
<select ng-model="rounds" ng-change="fnTopRating(rounds)" class="col-xs-4" ng-options="rounds for rounds in [1,2,3,4]">
<option value=''>round wise</option>
<option>Round {{rounds}}</option>
</select>
but here i am not getting round 1,round 2... in drop down instead i am getting 1,2,3,4...
I am not clear with what is happening .
Any help is appreciated.
Well, at first your syntax is a bit wrong. I'd recommend you to check the docs.
To add a prefix in your options you should use single quotes, like this:
<select ng-model="rounds" ng-change="fnTopRating()" class="col-xs-4" ng-options="'round ' + r for r in [1,2,3,4]">
<option value label="round wise"></option>
</select>
Note: You just need to use $scope.rounds in your controller to get the selected item in fnTopRating() function, you don't need to pass it as parameter.
I can't find a way to block one option from select list.
For example I have on page:
<select name="test_select">
<option value="1">Something I don't need</option>
<option value="2">Something I still need</option>
</select>
I use filter ##option[value="1"]
So.. seems that filter don't block initial state of select. After page loaded default value "I don't need" still displayed.
When I'm trying to select another option(s) - the first option disappear from the list which is fine, but still problem for me that initially unneeded option shown after page loaded.
Is there a way to block(remove) this option completely?
The filter works as expected because it's supposed to hide the <option> element, not the <select> element. If you want to hide the <select> element but only if it has a certain value, you'd need to wait for parent selectors to (hopefully) arrive with CSS4. Those would allow you to write the filter as
##!select > option[value="1"]:checked (based on the syntax in the W3C working draft)
##select:has(> option[value="1"]:checked) (based on the syntax in the CSSWG editor's draft)
I have a multi select dropdown. What I need to do is when the user lands on the page, I need to restrict him to modify his previous selections, basically disable those options inside dropdown. Here is the html -
<div>
<select multiple class="form-control selectpicker" ng-model="selectedNames" data-live-search="true" ng-options="opt.name for opt in availableNames track by opt.id" ng-change="onNameChange()"> </select>
</div>
Tried suggestions link - http://silviomoreto.github.io/bootstrap-select/
But if you add an option tag manually when you are using ng-options, it just doesn't get displayed. So tried using ng-repeat rather than ng-options but with ng-repeat my dropdown stopped showing tick-marks against previously selected values & by default displayed - "No values selected", though the model still had them.
Any pointers how to achieve this without resorting to jquery ?
Thanks
Anup
Use disable when syntax in ngOptions. Refer to the ngOptions docs for more details. Add a key in your ngOptions to indicate if the field was previously selected by user for eg. prevSelected: true and tell ngOptions to disable an option when this key is set/exists.
<select ng-model="myColor" ng-options="color.name disable when color.prevSelected for color in colors"></select>
Example on plnkr
I'm using an adaptation of PHPBB to create a drop-down list.
<select name="destination_path">
<!-- BEGIN path -->
<option value="{path.DESCRIPTION}">{path.DESCRIPTION}</option>
<!-- END path -->
</select>
The list is generated from a MySQL query, so it is dynamic. This list is within a form and when the form is fired I want to retain (and return) it's state in session variables. My first thought was to place something in the <select> statement.
I know you can use:
selected="option_selected"
in the relevant <option>, but it seems like a messy way to do this and would require an if statement to compare each tag as the tag is created.
Is there a way to declare the default option in the select tag, or a better defined method to achieve the same result?
Short answer: No.
The select tag defines the selected option in its option elements. What you could do if you want to achieve it differently, is putting the selected option on top without specifying a selected attribute. Most browsers select the first option as default if there is no selected attribute present.
Ex :
<select>
<option value="Hi"> Hi </option>
<option value="Hello" selected> Hello </option>
</select>
You may be able to select the option you need after compiling the list by adding a little jQuery.
A similar question has been asked on the jQuery Forums.
Using the example of:
<select name="options">
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
</select>
You can set the selected option by value:
$('[name=options]').val( 3 ); // To select Blue
Or you can set the selected option using the text:
$('[name=options] option').filter(function() {
return ($(this).text() == 'Blue'); //To select Blue
}).prop('selected', true);
Links to jsFiddle can be found in this post.
Credit to: Godsbest on the jQuery Forums.
Yes.... there is a way to declare the default option in the select tag
Try this...
To set a default value first you have to mention the name of the select tag and in the find() function just pass the value you have to set as default value.
$('select[name="destination_path"]').find('option:contains("default")')
.attr("selected",true);
I have a case where I want to allow a form variable to be set to one of a set of value (in my current case true/false) or left unset (in which case no value is returned rather than some 'none' value or a blank). A check box can give the unset bit but only one set value. A radio element could work, sort of. But once a value is selected there is no way to go back to unset. All the other inputs I've looked at always set the variable no matter what.
Am I missing something or am I just going to have to accept a less-than-ideal solution?
Three radio buttons or a <select> with three <option> will do.
Put three radios: A, B and None
Do a 'drop down menu' as show here: http://www.echoecho.com/htmlforms11.htm
Create the default value as 'None' followed by option A and then option B.
What about a drop down list with
---Please Select---
Option A
Option B
I've been applying to a lot of jobs online lately, and this is the route people generally have been taking.
Would a dropdown box work?
<select name="choices">
<option>(None)</option>
<option value="a">Choice A</option>
<option value="b">Choice B</option>
</select>
You would need to use some javascript. If you have jQuery there are several tri-state checkbox plugins.
For example: http://plugins.jquery.com/project/tristate-checkbox
There are also probably non jQuery scripts if you google for "tri state checkbox"
For example: http://caih.org/open-source-software/tri-state-checkbox-in-javascript/
Using 3 radio buttons in one group, you could hide the first 'none' radio button with CSS (visibility:hidden; or display:none;), and if that's the one still selected during your form validation, then the user hasn't chosen either of the true or false radios.
EDIT (post comments):
If no-Javascript is a requirement, then you can conditionally apply a 'hideableItem' class on the hidden radio, if scripting is disabled the worst you'll get is 3 radio for the user to choose from, as others have described. If JS is enabled, then the default radio is hidden and provides the behaviour i've described.
The conditional hiding if JS is dis/enabled technique is described here: http://lucassmith.name/2008/10/script-to-add-css-only-when-javascript-is-available.html
I use it all the time, its great.