My select element has the value set to a key on the binding object, and that key is set correctly, because i have other values that reference it (those work), however the select box isn't showing my value correctly.
<select value="{{key}}">
<option value="">- Field -</option>
<template repeat="{{field in fields}}">
<option value="{{field.key}}">{{field.key}}</option>
</template>
</select>
Expands to:
<select value="{{key}}">
<option value="">- Field -</option>
<option value="name">name</option>
<option value="phone">phone</option>
<option value="address">address</option>
</select>
If I console.log this.key in the ready function of my element I get 'name', further my second select in the element relies on this.key, and that select element's options are showing correctly.
Is there something special I need to do to have the select select the correct element from the key? I could do it in JS, but that seems overkill. Can you not set a select box using the value? Is it only a getter so-to-speak?
Ok, if you're setting the options in your select, in your ready function, then you can't set the value in the same function or before. You have to wait till after that function returns, or the selectbox won't have the options you need yet.
For now I'm using a 0ms timeout, although im sure their are better events to subscribe to instead.
Regardless if anyone else is having issues setting their select values for polymer elements, then keep in mind the options need to be set before you have have your set value be reflected in the UI and then you have to explicitly set it again.
Related
In the HTML, I got something like this for select.
What it's doing is the default value showing for the select dropdown is Select year but it cannot be selected.
<select>
<option disabled hidden selected>
Select Year
</option>
<option value="2021">2021</option>
</select>
But when I implement it in React.
It giving me this error
Use the defaultValue or value props on instead of setting selected on .
But when I use default value or value the SELECT YEAR option is not there anymore.
All you need is to remove both selected and disabled attributes from first <option>:
<select>
<option hidden>Select Year</option>
<option value="2021">2021</option>
</select>
Here's why:
<select> is shorthand for <select defaultValue={undefined}>, which makes the first <option> with a value of undefined get selected. In your case, that's the first <option>, since it doesn't have a set value, which is equivalent to having a value set to undefined.
Probably the most important bit is removing disabled. Remember this is JSX, not HTML. JSX is used by React to create valid HTML. If you specify disabled attribute, React won't allow that <option> to be selected, regardless of method.
But you want that <option> selected by default, so it doesn't make sense to disable it.
You only want the user not to be able to select it, which is exactly what the hidden attribute does.
Working demo.
I'm developing a web application using Angular 6. I used the library bootstrap-select to implement a combo-box (with additional possibilities to customize). I have a problem: when I set the multiple attribute, graphically the behavior is right (all the selected strings appear inside the input box, together). The problem is that the value connected with my ngModel (used to get the data with 2-way binding) it's always only one (and always corresponds to the first value displayed inside the box, although there are other values in it!). This is the code:
<select
class="form-control selectpicker show-tick"
data-width="200px"
multiple
title="my_title"
name = "name"
[(ngModel)] = "value"
(ngModelChange) = "onChange($event)"
>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="2">Value 3</option>
</select>
This is the result (graphically it's exactly as I would like):
But, as you can see, with each click to add a new value, the value object is always and only associated with 1 (because Value 1 is the first in the list and doesn't seem to matter that the other two values are present). The console log (object value):
How can I solve this problem?
The problem is that you are using a multi select version for jquery. You could do some tricks to make it work, but it will not be quite elegant
Also why use jquery in angular? You always have to try to avoid it
Angular handles the bindings in another way.
I recommend you use this library ng-select
Demo
I have two <select> elements:
<select [(ngModel)]="model.SelectedSomeValue">
<option *ngFor="let someValue of model.SomeValues">{{ someValue }}</option>
</select>
<select [(ngModel)]="model.SelectedSomeValue.SelectedOtherValue">
<option *ngFor="let otherValue of model.SelectedSomeValue.OtherValues">{{ otherValue }}</option>
</select>
It seems that you can't bind the second <select> to model.SelectedSomeValue as it never populates correctly. It contains the value, although by specifying [value]="value" one would expect that the object reference is stored but that's not the case. So how can we do a binding between two <select> elements?
If I understand your question, you want one selector to choose a category and a second selector to choose the options within the category? So if you change selector 1, then you would get a different list of items in selector 2?
If so, then check this Plunker: https://embed.plnkr.co/UErCcJeX5ply1BXSjweY/
There was a bug in the beta releases that prevented ngModel from working on some browsers so make sure you upgrade at least to RCs (the plunker is RC5).
Essentially, the code is this:
<p><select [(ngModel)]="selected">
<option value=""></option>
<option *ngFor="let datum of data" [ngValue]="datum">{{datum.name}}</option>
</select>
<p><select [(ngModel)]="selected2">
<option *ngFor="let val of selected?.value" [ngValue]="val">{{val}}</option>
</select>
And the component has a list of objects in data and a place to store the selected values in selected and selected2. The first selector uses data to display options (and stores the object with the subcatagories as the option value) and is bound to the selected variable. The second second selector gets uses the selected.values to create options, and stores the selection in selected2.
I think I may have a unique issue, or at least I cannot seem to find an answer anywhere on the internet. I have a FORM that when a selection is made on a select option above it choose the next select option to show. So basically I have multiple select options with the same name but only one group of select options shows up depending on what I selected on the choice before it. The problem is that when I make a selection to a select option in the first group, the result (value) always shows up as the first option in the last select statement with the same name. Here is a snippet:
<label for="mainIssue" id="mainIssueLabel" class="labelTitle" style="display:none;">Main Issue:</label>
<select name="mainIssue" id="warrantyFiltrationType" style="display:none;">
<option value="Type Filtration">Select One</option>
<option value="CP2000">CP2000</option>
<option value="RX">RX</option>
<option value="SFS">SFS</option>
<option value="SFX">SFX</option>
<option value="RP">RP</option>
<option value="Sand">SAND</option>
</select>
<select name="mainIssue" id="warrantyPumpType" style="display:none;">
<option value="Type Pump">Select One</option>
<option value="F350C">F350C</option>
<option value="F400C">F400C</option>
<option value="F600C-9">F600C GFCI 9</option>
<option value="F600C-18">F600C GFCI 18</option>
<option value="F700800C">F700C/800C</option>
<option value="F1000C">F1000C</option>
<option value="F1500C">F1500C</option>
<option value="F2000C">F2000C</option>
<option value="X600">X600</option>
<option value="X1000">X1000</option>
<option value="X1500">X1500</option>
<option value="CP2000C">CP2000C</option>
</select>
Say the select that comes up is the filtration select options. No matter which option I choose in the filtration selection, the value always shows up as value "Type Pump", or the first option in the last selection with the same name.
It appears that even though the correct selection options are showing, only the last selection option group is being read.
Any clues?
As stated by #David, if your intention is to post the data and you want all select fields with the same name to post the data to the server, then you need to use unique names...
OR...
In the name attribute, you need to append a [] to the end of the name that is the same across multiple selects / inputs.
An example of this which uses your code is as follows
<select name="mainIssue[]" id="warrantyPumpType" style="display:none;">
Note that this will post to the server where mainIssue is an array of each of the datasets.
Note that another small change may be what your looking for..
<select name="mainIssue['warrantyFiltrationType']" id="warrantyFiltrationType" style="display:none;">
and
<select name="mainIssue['warrantyPumpType']" id="warrantyPumpType" style="display:none;">
Note that all I did here was throw your id's into the square brackets to "name those keys". When this is posted to the server, your $_POST data (assuming your using php to capture the post), will be a multi-array where $_POST['mainIssue'] is an array with the key => values your expecting.
-EDIT-
To take this further, you would probably want your "Select One" option's value to be null or empty...
...And on the server, you would simply check for the mainIssue['specificKey'] which has a value that is not empty. With this method, you can then take the single selected value (from which ever select that it was selected in) and store it into the single DB field you need it in.
-EDIT-
An example in php side would be to loop over the array that came in, and simply check.
$mainIssue = ''; // This is what ever you want to default to before checking for the value of mainIssue
foreach($_POST['mainIssue'] as $key => $value) {
if($value != '') { // If the value is empty, then they did not select an item in that specific select field
$mainIssue = $value; // If the value was selected, then there would be a non-empty value somewhere in the multi-dimension array of mainIssue, and here is where we capture it
}
}
// So at this point of the code $mainIssue variable has a value of what ever was selected, else what ever the default was set before the loop above
You would want to make sure your "Select One" option's value attribute is empty for this to work (for all your selects which have the same name)
<select name="mainIssue[]" id="warrantyFiltrationType" style="display:none;">
<option value="">Select One</option>
<option value="CP2000">CP2000</option>
<option value="RX">RX</option>
<option value="SFS">SFS</option>
<option value="SFX">SFX</option>
<option value="RP">RP</option>
<option value="Sand">SAND</option>
</select>
You have multiple form elements with the same name:
<select name="mainIssue"
...
<select name="mainIssue"
When posting a form to the server, the name of any given element is the "key" in its "key/value pair". Thus, it must be unique in that form post. As the browser builds the form post, any element it finds with the same name as a previous element is going to overwrite that one in the form post. (This behavior may be undefined and browser-specific.)
Basically, give your form input elements unique names. You can do this by either:
Having multiple select elements with unique names.
Having a single select element which you dynamically re-populate with options based on user selection.
In all browsers that I know of, the first option is selected pr default in the below HTML:
<select>
<option>foo</option>
<option>bar</option>
</select>
But can I count on this behavior? Or would it be better practice to explicit specify default value even when it is the first option, ie would it be safer to go:
<select>
<option selected>foo</option>
<option>bar</option>
</select>
The HTML(5) specification doesn't say that the default selected option should be the first one if no selected attribute is present.
The selectedness of an option element is a boolean state, initially false. Except where otherwise specified, when the element is created, its selectedness must be set to true if the element has a selected attribute. Whenever an option element's selected attribute is added, its selectedness must be set to true.
It does however say that if no selected value is present then the default should be to return a selectedness value of -1.
The selectedIndex IDL attribute, on getting, must return the index of the first option element in the list of options in tree order that has its selectedness set to true, if any. If there isn't one, then it must return −1.
I guess you therefore shouldn't assume that the first option will always be selected as default.
I don't think it matters. It's only if you do not have your default value at the top. The "selected" is if you want to change the default option. If you don't have it on the top.
Like this:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
On first render (or perhaps when the <select> element is created), the first <option> is implicitly selected: selectedIndex returns 0, and selected (of first option) returns true.
But if you change the options with JavaScript, for example remove all options and add new ones, then selectedIndex returns -1, and selected (of first option) returns false.
All the above assumes, of course, that the selected="selected" attribute is never used.
So, if you are dynamically adding options, and want to make use the first is initially selected, then you must use the selected attribute.