How can I make a dynamic select box? [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I've three select-box here. How can I make this.
<select class="form-control input-lg">
<option value="1">abcd</option>
<option value="2">efgh</option>
<option value="2">ijkl</option>
<option value="2">mnop</option>
</select>
<select class="form-control input-lg">
<option value="10">desk</option>
<option value="20">pen</option>
<option value="30">pc</option>
</select>
<select class="form-control input-lg">
<option value="100"></option>
<option value="200"></option>
<option value="300"></option>
</select>

Fundamentally this is an event driven question.
You want to populate the secondary select based on the first. You can do this with a jquery change event.
http://api.jquery.com/change/
On change, you initiate a callback function that populates the second select box, from there the population of the third is just the same concept.
A high level explanation is as such:
<select id="select1" class="form-control input-lg">
<option value="1">abcd</option>
<option value="2">efgh</option>
<option value="2">ijkl</option>
<option value="2">mnop</option>
</select>
<select id="select2" class="form-control input-lg">
</select>
<script>
$('#select1').change(function(){
alert("Something has changed");
// RUN SOME OTHER FUNCTION TO POPULATE THE SECOND SELECT BOX
// Grab the dom element of the second select
var select2 = $("#select2");
// iterate your data, here an array with an element, and populate the select element
$.each(['some data'], function() {
select2.append($("<option />").val("Something").text("Something else"));
});
})
</script>
Note: For this you will obviously have to include JQuery library in your code
This is also considerably inefficient, but the improvements would take too long to explain in such an open question.

Related

HTML5 datalist only option value hidden [duplicate]

This question already has answers here:
How to display only the text in datalist HTML5 and not the value?
(3 answers)
Closed 5 years ago.
I want to hide datalist value. Am using this code
<input list="options" oninput="console.log(this.value);" />
<datalist id="options">
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
</datalist>
I mean in the inputbox this showing values and product 1
i need to show only product 1,2,&3...
hide value (1,2,3)
.
Note: Here am passing value 1,2,3 so i just want to hide that only
here my code https://jsfiddle.net/69u5Leoa/
You may want to use select, because for the select element, the user is required to select one of the options you've given.
For the datalist element, it is suggested that the user select one of the options you've given, but he can actually enter anything he wants in the input.
you can see this to get more information HTML Form: Select-Option vs Datalist-Option
<select id="options">
<option></option>
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
</select>
Value="<%# DataBinder.Eval(Container, "ItemIndex") %>" it can solution this problem

Write-in option with dropdown option [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
how to include write-in option after drop-down option in html or javascript. As an example in the coding below,
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
But the user's choice wasn't in the list given (e.g. Honda). so he/she can write their option in 'others' option.
Apologies for my english. Thanks in advance.
It seems you may want to use the <datalist> along with an <input>, which offers the functionality you're looking for; in the below example if the user types S then the option of Saab will show up which can be selected, or the user can continue to type to add a new option to the list:
<datalist id="carOptions">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</datalist>
<input type="text" name="automaker" list="carOptions" />
While this may not be precisely what you're hoping for it does offer the functionality you require without a dependence on JavaScript.
References:
* <datalist>.
* HTMLDataListElement.
You can easily do that with jquery.
$('#dropdownId').append($('<option>', {
value: -1,
text: 'None of them work for me..'
}));
And just handle the case when the value is -1

Toggling ng-selected

I am trying to toggle ng-selected options in Angular, but am running into some difficulty. Here's what I'm trying:
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option value="0-15" ng-click="toggleSelect(datacut, '0-15')" ng-selected="datacut.ages.indexOf('0-15') !== -1">15 and Younger</option>
<option value="16-19" ng-selected="datacut.ages.indexOf('16-19') !== -1">16 - 19</option>
<option value="20-24" ng-selected="datacut.ages.indexOf('20-24') !== -1">20 - 24</option>
</select>
Controller:
$scope.toggleSelect = function(dc, str){
dc.ages.splice(dc.ages.indexOf(str), 1);
//e.currentTarget.selected = !e.currentTarget.selected;
};
The problem is that when I click on an option gets selected on mousedown, and on release gets unselected. The commented out code also does the same thing.
I feel like this should have a simple solution, but I can't really figure out an elegant solution.
Any help would be much appreciated.
Edit: For clarification - I need to be able to have nothing selected, so clicking a single selected element needs to unselect it. I also need to be able to select multiple options.
Your are using ng-model which does the magic for you. So ng-click and ng-selected is not necessary. See my working fiddle
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option ng-value="'0-15'">15 and Younger</option>
<option ng-value="'16-19'" >16 - 19</option>
<option ng-value="'20-24'" >20 - 24</option>
</select>
It looks like you want to remove the selected age from the ages model. Then you need to use the ng-change directive. And remove the ng-click or ng-selected. But leave the ng-model to access the value on the method that remove the selected item.
See my plunker
<select multiple name="ages" unseletable forbiden-opt="datacut.MIN_AGE" ng-model="datacut.chosenAge">
<option value="" disabled="disabled">Please Select</option>
<option ng-repeat="age in datacut.ages" value="{{age}}">
{{age}}
</option>
</select>
EDIT: This should be made in a directive because you need to update the option html to unselect the option.

How to target selected attribute(in HTML option) in CSS or Javascript [duplicate]

This question already has answers here:
Changing the selected option of an HTML Select element
(14 answers)
Closed 7 years ago.
<select name="cat1" class="form-control input-lg">
<option value="">All Businesses</option>
<option value="78">Deals</option>
<option value="46">Delivery</option>
<option value="45">Dispensary</option>
<option value="47">Doctor</option>
</select>
I know you could simply add the selected="selected" to the whatever option to make it default in the drop down. Currently the "All Businesses" option is the default one showing. I want the Dispensary option to show as default
<select name="cat1" class="form-control input-lg">
<option value="">All Businesses</option>
<option selected="selected" value="45">Dispensary</option>
<option value="46">Delivery</option>
<option value="47">Doctor</option>
<option value="78">Deals</option>
</select>
so basically I want that achieved but I am unable to edit the HTML code. Is there a way I can achieve it without touching the HTML?
$('select[name="cat1"] > option[value="45"]').attr('selected','selected');
This jQuery code will select that option element and add that attribute to it.

How to add default text to HTML <select>? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I need to add some default text to a HTML select box. The placeholder tag which works with input doesn't seam to work whit this one?
This works
<td><input type="text" placeholder="<?php echo $lang ['your_website']; ?>"/></td>
This doesn't work
<td><select type="text" placeholder="<?php echo $lang ['select']; ?>"/></td>
How can I fix this?
Are you looking for the selected attribute?
<select>
<option selected="selected">Select Country</option>
<option>United States</option>
<option>Mexico</option>
</select>
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
I think you can use it like this:
<select>
<option selected="selected">Default Option</option>
<option>1</option>
<option>2</option>
</select>
ie, use selected="selected" for the option you want to be the default.
or you may try this:
<select>
<option value="" disabled selected>Default Option</option>
<option value="1">1</option>
</select>

Categories

Resources