In a form I have a select box with several options, each representing a report with various variables which influence the rest of the form. Some reports require a start date, others an end date, some require both. I have bound the requirements for each of the reports to the option-elements like this:
<select data-bind="value: ReportId">
<option value="ID" data-hasStartDate="BOOL" data-hasEndDate="BOOL">Report name</option>
</select>
<input data-bind="visible: hasStartDate" />
<input data-bind="visible: hasEndDate" />
with ID being the id of the report and BOOL being either true or false. I use knockout to data-bind the value of the select-box to the reportId. But I could not figure out how to bind the hasStartDate and hasEndDate-values to a Knockout observable in order to show the appropriate form elements.
Even with custom bindings, I needed a normal jQuery onChange-event in order to apply the values to the Knockout-values hasStartDate and hasEndDate. Is it possible to do it entirely with Knockout itself?
Have you tried using the options binding for select boxes?
You also can't bind knockout using data-whatever="some value". You always use data-bind, like so: data-bind="bindingtype: value".
Edit:
That being said... If you want to get the data from a selected option in a <select> element, I would use the following jQuery:
$("select").on('change', function() {
var selectedData = $(this).find(":selected").data("stuff");
});
You can then use selectedData and apply this to a knockout view model.
Working example in a fiddle: http://jsfiddle.net/RZq6Q/4/
Related
I am creating a dropdown with AngularJS.
here is the code..
<div class="col-md-9">
<input type="text" placeholder="Enter Module" list="names"
ng-model="data.Name" />
<select id="names" class="form-control" ng-model="data.Name"
ng-change="SetCategory(data.Name)" name="name">
<option value='' disabled selected>------------- select an option ----------</option>
<option ng-repeat="e in BrData | filter:data.Name "
value="{{e.Name}}">{{e.Price}}</option>
</select>
</div>
NOTE: List is Dynamic and i am using AngularJS to get data.
I need To create a searchbar inside select tag.
But Input tag can't nested in select tag.What should I do?
You can use typeahead from UI Bootstrap: https://angular-ui.github.io/bootstrap/#!#typeahead
Or if you need more advanced features along with search like multi-select, select all, deselect all, disable options, keyboard controls and much more try this: http://dotansimha.github.io/angularjs-dropdown-multiselect/docs/#/main
The way I see it, there are three options here.
Option One - Input outside the dropdown
Get the input outside the dropdown, and filter the values based on that value from the outside. I know that this is not your intended functionality exactly, but it would save you some trouble.
Option Two - Use some kind of third party dropdown library
As Mohd mentioned https://angular-ui.github.io/bootstrap/#!typeahead is a good fit and UI select too
Option three - Create something of your own
It need not even be using <select> tag. This is by far the most difficult, but also the most customizable and suitable for individual needs. The select tag will not be used as it does not support input inside of it, so some high end css will need to be used, as well as some backwards compatibility multiple browser testing that the already made libraries have already done.
Dealing with the <select> nightmare
From the Docs:
<select> Element Technical summary1
Permitted content: Zero or more <option> or <optgroup> elements.
Tag omission: None, both the starting and ending tag are mandatory.
Permitted parents: any element that accepts phrasing content
The short answer is that <input> elements can not be placed inside <select> elements.
<datalist> Element2
The datalist element is intended to provide a better mechanism for this concept.
<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
<option value="A">
<option value="B">
</datalist>
For more information, see
HTML combo box with option to type an entry
MDN Learn HTML Forms - Dealing with the select nightmare
Use select2 as a dynamic option instead of HTML select option:
here is link for select using js:
https://select2.org/tagging
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'm developing a web application using Angular 6. if I create a custom component that simulates the HTML <select>, I can not make it have a default value when it is referenced by another component!
You can find the (simple) application code at the following link: stackblitz here
In this question
I asked how to set a default value when the ngModel is present (
the selected attribute of <option> doesn't work anymore!).
As you can see my input-select custom component
initialize value (value linked to the ngModel).
value: any = 'default';
Unfortunately, however, the component is displayed like this:
As you can see the console, at the press of submit, print this:
I would like this situation not to show up: I would like a combo box with a pre-selected value. I can't understand what I was wrong with this application.
You had used ngModel but did not bind with anything so Angular doesn't know what value it supposed to bind with. You should bind ngModel with property which contains the default value.
<form #form="ngForm" (ngSubmit)="onSubmit(form.value)">
<input-select
name="name"
[options]="my_options"
[(ngModel)]="value"
></input-select>
<input type="submit" value="Submit"/>
</form>
Working copy is here - https://stackblitz.com/edit/angular-qanpuu
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.
I am using jstl with dropdown lists.
When i click submit button i success the specification but values int dropdownlists are reinitialized.
So I want to submit form without loosing the values already selected in the form because I need to stay always at the same level in the form.To be more clear, user choose a value from ddl and click edit button to show other options and fill them at the same form without loosing what he has selected.
I have tried to deal like that...
<form action="myjsp.jsp" method="post">
<input type="Submit" value="Edit">
...but it doesn't work.
Thank you for your help.
You need to preset the inputs with the request parameter values. You can access parameter values in EL by ${param.name}. Basically:
<input type="text" name="foo" value="${param.foo}">
Note that this is XSS sensitive. You always need to sanitize the user inputs. You can use the JSTL functions taglib for this.
<input type="text" name="foo" value="${fn:escapeXml(param.foo)}">
In case of dropdowns rendered by HTML <select> element, it's a bit trickier. You need to set the selected attribute of the HTML <option> element in question. You can make use of the ternary operator in EL to print the selected attribute whenever the option value matches the request parameter value.
Basic example:
<select name="foo">
<c:forEach items="${options}" var="option">
<option ${param.foo == option ? 'selected' : ''}>${option}</option>
</c:forEach>
</select>