Is it possible for <select>-lists to reference the same list of options, similar to <input> with <datalist>?
I generate a list of several entries, where (among other things) the user selects a value of a dropdownlist. The options in this list are the same for each entry, so I would prefer it, if the list of options doesn't need to be re-added for each dropdownlist.
I can't use <input> with <datalist>, since the user may only choose from available entries.
you could do this using jquery easily,
<datalist id="mylist">
<option value="a">
<option value="b">
<option value="b">
</datalist>
<select class="someSelect">
<select class="someSelect">
$(".someSelect").html( $("#mylist").html() );
this would replace all your select list from the datalist
This is not realy the good answer. There is a big difference between 'datalist' and 'select' which for as far as I read till yet stays unspoken : in a select the 'value' can be different from the visualized 'innerHTML', which is not the case in a datalist. So what we need is a kind of 'select' with an attribute like 'selectlist="countries' the selectlist then would look like this :
<selectlist>
<option value='1'>Belgium</option>
<option value='2'>France</option>
</selectlist>
and can be reused in more then one 'select' and send the value back to the server instead of the innerHTML.
Related
I have a select element and no matter what I try, the option values are blank. The number of options in the drop down is correct, but they are blank. Here is the html:
<label for="accountBrokerageName">Brokerage:</label>
<select id="accountBrokerageName">
<option value="Interactive Brokers, LLC"></option>
<option value="Vanguard"></option>
</select>
I'm assuming some css from another library is overriding the standard select>option css. I've tried commenting out each linked library one at a time but no joy. I've tried adding a .clear-css class to the option like this:
.clear-css {
all:unset;
}
and append it to all options using jquery just before it is used, like this:
$('option').addClass('clear-css');
Still blank.
I've also tried
.clear-css {
all:initial;
}
Still blank.
I also tried adding the clear-css class to the select element, but that causes the whole select element to disappear.
Any suggestions?
You need to include the values for each option between the opening and closing <option> tags. The value doesn't need to match the text content. In fact, it's usually better to remove any special characters and even spaces when working with external APIs, like this:
// This JS is just for the sake of example, to log the new value with each change
const select = document.getElementById('accountBrokerageName');
select.addEventListener('change', () => console.log(select.value));
<label for="accountBrokerageName">Brokerage:</label>
<select id="accountBrokerageName">
<option value="" disabled selected>Choose an option...</option>
<option value="interactive-brokers-llc">Interactive Brokers, LLC</option>
<option value="vanguard">Vanguard</option>
</select>
Select values must be within the actual <option> tags:
<label for="accountBrokerageName">Brokerage:</label>
<select id="accountBrokerageName">
<option value="Interactive Brokers, LLC">Interactive Brokers, LLC</option>
<option value="Vanguard">Vanguard</option>
</select>
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.
I have a <SELECT multiple> field with multiple options and I want to allow it to have only one option selected at the same time but user can hold CTRL key and select more items at once.
Is there any way how to do it? (I don't want to remove 'multiple').
Just don't make it a select multiple, but set a size to it, such as:
<select name="user" id="userID" size="3">
<option>John</option>
<option>Paul</option>
<option>Ringo</option>
<option>George</option>
</select>
Working example:
https://jsfiddle.net/q2vo8nge/
If the user should select only one option at once, just remove the "multiple" - make a normal select:
<select name="mySelect" size="3">
<option>Foo</option>
<option>Bar</option>
<option>Foo Bar</option>
<option>Bar Foo</option>
</select>
Fiddle
Why don't you want to remove the multiple attribute? The entire purpose of that attribute is to specify to the browser that multiple values may be selected from the given select element. If only a single value should be selected, remove the attribute and the browser will know to allow only a single selection.
Use the tools you have, that's what they're for.
You want only one option by default, but the user can select multiple options by pressing the CTRL key. This is (already) exactly how the SELECT multiple is meant to behave.
See this: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple
Can you please clarify your question?
<select name="flowers" size="5" style="height:200px">
<option value="1">Rose</option>
<option value="2">Tulip</option>
</select>
This simple solution allows to obtain visually a list of options, but to be able to select only one.
I had some dealings with the select \ multi-select
this is what did the trick for me
<select name="mySelect" multiple="multiple">
<option>Foo</option>
<option>Bar</option>
<option>Foo Bar</option>
<option>Bar Foo</option>
</select>
I am coming here after searching google and change thing at my-end.
So I just change this sample and it will work with jquery at run-time.
$('select[name*="homepage_select"]').removeAttr('multiple')
http://jsfiddle.net/ajayendra2707/ejkxgy1p/5/
Late to answer but might help someone else, here is how to do it without removing the 'multiple' attribute.
$('.myDropdown').chosen({
//Here you can change the value of the maximum allowed options
max_selected_options: 1
});