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
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 (by Silvio Mureto) 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?
You change the value attribute of the options?
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
Currently you have 3 option elements all with value="1". So your output is exactly what you told angular to select.
edit: as you edited the question, we probably need to see the onChange method to help understand the problem better
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.
I'm running protractor e2e tests on an angular page and I wan't to check some dropdown boxes for their selected options. I got the following html code generated from angular:
<select class="ng-pristine ng-valid ng-touched" id="idxyz" ng-model="model" ng-options="xxx">
<option selected="selected" value="object:null"></option>
<option label="Steuerung 1" value="number:1">Steuerung 1</option>
<option selected="selected" label="Programme" value="number:2">Programme</option>
<option label="Steuerung 2" value="number:3">Steuerung 2</option>
</select>
And this is the protractor code that I use to get the selected option.
expect(element(by.css("select[ng-model='model'] option[selected='selected']")).getAttribute("value")).toBe("Programme");
As you might have noticed - there are two options with selected='selected'.
This is only the case when running the tests with protractor. When doing the same things by hand, only the truly selected option has the attribute selected='selected'.
Can anyone explain why this happens? The css selector should only return one option element because only one can be selected. But since there are two with the selected attribute - protractor gives me the following warning:
WARNING - more than one element found for locator By.cssSelector("select[ng-model='model'] option[selected='selected']") - the first result will be used
The first result is the empty option which is actually not selected.
Setup to run the tests:
angular: 1.4.4
grunt: 0.4.5
protractor: 2.5.1
grunt-protractor-runner: 2.1.0
To workaround the problem, you my additionally check the value to start with number:
select[ng-model=model] option[selected=selected][value^=number]
Or, we may check the value not equal to object:null:
select[ng-model=model] option:not([value="object:null"])[selected=selected]
Note that to make dealing with select-option easier, consider using a custom wrapper, see:
Select -> option abstraction
I have a dropdown list (values populated from an object) from which the value selected goes on to the next page. However if that value is selected then another property of that object should go on to the next page.
My current code is:
<select name="ElementName" class="dropdown"
id="ElementsDropDownList">
<isloop iterator="ELEMENTS">
<option value="#ELEMENTS:ElementName#"><isprint
value="#ELEMENTS:ElementLabel#">
</option>
</isloop>
</select>
I want something like :
<select name="ElementName" class="dropdown"
id="ElementsDropDownList">
<isloop iterator="ELEMENTS">
<option value="#ELEMENTS:ElementName#"><isprint
value="#ELEMENTS:ElementLabel#">
</option>
<input type="Hidden" name="extraField" id="extraFieldUUID" value="<isprint
value="#ELEMENTS:ElementValue#">">
</isloop>
</select>
Here input field inside the loop is not working.
You can't have an input element inside of a select element. It would have to be separate:
<select name="ElementName" class="dropdown" id="ElementsDropDownList">
<isloop iterator="ELEMENTS">
<option value="#ELEMENTS:ElementName#">
<isprint value="#ELEMENTS:ElementLabel#">
</option>
</isloop>
</select>
<input type="Hidden" name="extraField" id="extraFieldUUID" value="<isprint value="#ELEMENTS:ElementValue#">">
However, clearly this won't work in your case because this is outside the loop. You'd need another loop, which means every ElementValue value would be included in the form. That's... no good.
It sounds like what you're trying to achieve is to have a select with two values. It doesn't really do that, pretty much by design. I can think of two options at the moment:
Include a hidden input outside the select element as shown above, but don't set a value for it. Include the list of possible values in JavaScript (as a hash table of some sort, most likely, using the ElementName as the key). Then attach an event handler to the select element's change event which sets the hidden input value based on the newly selected value.
Or, include both values in the select as delimited strings and parse them back out to separate values on the receiving page. Maybe something like:
(I'm completely guessing on the syntax, since I don't know anything about the templating tool you're using.) Then the code on the receiving page would receive some delimited string, something like:
"SomeElement|123"
That code would then need to parse that string into its two component values.