I use this code to make a dropdown with an input to search and list items from an array ..
<input list="homebox_id" formControlName="homebox_id"/>
<datalist id="homebox_id"
[ngClass]="{invalid: invalidInputs}">
<option *ngFor="let homebox of homeboxs" value="{{homebox.homebox_id}}">{{homebox.serial_number}}</option>
</datalist>
all is good except this code does not display serial_number but it displays the value i want to send "homebox_id"...What can i do to display the text i want?
Related
I have created an input that shows a glyphicon and some text (text is not shown in pictures cause it is not relevant).
<select class="form-control glyphicon" required>
<option value="empty"></option>
<option *ngFor="let car of cars" value="true"> {{car.name}}</option>
</select>
This code partially works. It shows correctly what I what to show after selecting the option, but it does not while I visualize the proper option. I attach a photo to explain it better:
I would like to know if it is possible to show the icon also during the selection of it.
I have an html form element that is a <select> and whenever I add options and specify a value for the options, it adds a space/margin above the form select field. If I modify the code and set all options to value="" then the space/margin goes away.
<select id="authorizenet_cc_type" name="payment[cc_type]" class="required-entry validate-cc-type-select">
<option value="">--Please Select--</option>
<option value="">American Express</option>
<option value="">Visa</option>
<option value="">MasterCard</option>
<option value="">Discover</option>
</select>
The code above gives me:
But when I add values to each option, I get the following result:
How can I fix this to have the values set, but eliminate the space that it creates?
EDIT: It seems like it might be some sort of JavaScript code or something. When the page first loads it's OK for about 1 second, then once the placeholder info loads into all the other input fields, the space pops up.
Can any one tell me how I can get the output of a dropdown to be more than one line?
I have an array that has a list of names and against each name a list of there children for example
I want users to be able to through the drop down list select a name and then it displays a list of there children
<form name="form" onsubmit="CheckForm()">
<select name="myOptions" onchange="document.form.showValue.value=this.value">
<option value="">Select a link</option>
<option value="Link1","link2">Description1</option>
<option value="Link2">Description3</option>
<option value="Link3">Description3</option>
<option value="Link4">Description4</option>
</select>
<input type="text" name="showValue">
</form>
I wanted to give more of an example of what I am after. So I have the following lists :
Cars = Ford,Dodge,Fiat
Fruits = Apple Banana, Orange
Colours = red, orange, green
I want a drop down list from which i can pick "cars","fruits","Colours". When one is picked in the drop down the results appear as a list in a right hand pane.
So i am not looking for multiply levels of drop-down lists, just a single dropdown, but where in the HTML the value is a single word, i want the value to be a list of words.
You should probably change your input to a textarea as text inputs are inherently 1 line. Also your option values have to be a single value, so you can do something like the following where I've put your Link1 and Link2 in the value for Description 1 and separated them with
Line Feed and
Carriage Return in order to put them on different lines in the text area.
Of course you could also use a value like value="Link1,Link2 and use the replace method in javascript to swap out the comma for the line feed and carriage return if you wish.
select,
textarea {
vertical-align:top;
}
<form name="form" onsubmit="CheckForm()">
<select name="myOptions" onchange="document.form.showValue.value=this.value;">
<option value="">Select a link</option>
<option value="Link1
link2">Description1</option>
<option value="Link2">Description3</option>
<option value="Link3">Description3</option>
<option value="Link4">Description4</option>
</select>
<textarea name="showValue"></textarea>
</form>
Or if I misunderstood and you just want a comma separated list of words to appear in your text input without them being on different lines, then just alter your original code, and change that first option to:
<option value="Link1,link2">Description1</option>
You could use a dropdown in a dropdown in bootstrap.
here is a link to a post where the author does the same thing.
It's basicly a list in a list, you no longer use select options.
Make sure you have bootstrap imported in your HTML and it should work.
To get the value of the dropdown, simply use Jquery to go through each <li> and check for the selected one.
Hopes it helps !
Nic
I have a form for editing existing data. The user chooses a record and then the form is pre-populated by a database query. Some of the form fields are presented as datalists (allowing pre-populated choices, but users can enter their own).
What I would like to do is to have these datalist elements appear with the current value for that key (from the db) showing in the text box atop the datalist - i.e., in the same manner that an <option> value can be matched to options in a <select> input and show that option in the <select> box when it is rendered.
I've added selected to the options list like this:
<input type="search"
name="Status"
placeholder = "~ Status ~"
id="Status"
list="statuslist">
<datalist id="statuslist">
<select>
<option value="launched">launched</option>
<option value="pre-launch" selected>pre-launch</option>
<option value="no company">no company</option>
</select>
</datalist>
...but that doesn't seem to do the trick. The datalist input box always displays ~ Status ~ (the placeholder). If I remove the placeholder, it's just blank.
Does datalist support this kind of functionality? How do I make this happen?
datalist.js doesnt update with the selected value, you have to add this after the datalist initialization
//traverse each list
$('input[list]').each(function(){
// variable for the jquery object of the selected option
var datalist = $('#' + $(this).attr('list') + ' option:selected');
// check if value, but also check if option has the attribute "selected"
if(datalist.val() != 'undefined' && datalist.attr('selected')){
// update selected to the pre-selected
$(this).attr('value',datalist.text());
}
});
updated jsfiddle
Edit: And added support for multiple lists as requested, and fixed error with the datalist.js fallback solution to avoid overwriting the placeholder if nothing selected.
I am writing an select drop down in html which has
<option><input type="text"></option>
But when I am running that program the textbox is coming out of the dropdown,the purpose of inserting text box in select is that , If a user is unable to find its desired option . He will be able to add a new one.
This is the select code. You can see alive demo running this code http://jsfiddle.net/_nikhilagrawal/eJ7k6/3/. Why this input type text is coming outside the select. Please have a look.
<select name="color">
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option><input type="text" name="color" /></option>
</select>
This is the output of the drop down.
<option> elements cannot have anything other than text inside them.
If you want a widget that combines text inputs with a dropdown menu then you will have to build it using JavaScript.
You can not write
<input type="text" name="color" />
inside <option></option> tag.
You should add textbox nearest to selectbox If a user is unable to find its desired option,user can add new one. or you need to customize your select box using css+jquery