i would like to know is there a way to rearrange existing options based on boolean value ?
Example;
If matchtime===true, option['time'] must have priority in the options list
If matchquality===true, option['quality'] must also be priority in the options list
<form>
<select name="option_id" >
<option disabled selected value> -- select a category -- </option>
<optgroup label="Recommended">
<option disabled > ---- </option>
</optgroup> -->
<optgroup label="All Category">
<option id="time" value="time" >Time </option>
<option id="quality" value="Quality" >Quality</option>
<option id="management" value="management" >management</option>
</optgroup>
</select></form>
Javascript:
var sel=this.form.elements['option_id'];
var groups = sel.getElementById('optgroup');
groups=groups[0];
var opt=document.createElement('option');
opt.appendChild(document.createTextNode("newoptions"));
var matchtime=true;
var matchquality = false;
if(matchtime===true){
groups.appendChild(opt);
}
Extra:
I want to create an autosuggest category based on boolean value. If possible, i also want to label the options with the word "Recommended".
If not possible, i was thinking on arrange them using optgroup to separate options that its boolean value is true.
Reference link: https://www.dyn-web.com/tutorials/forms/select/option/dom-demo.php
Related
I have a basic select element with options that dropdown hooked up to a small set of data which is being filtered using the dropdown. Initially on page load the select element has a value of undefined (according to the console), however after selecting any option it takes on the value of that option.
How can I go back to undefined? Basically I want to be able to select an option in the list that will go back to displaying all of the data. Below is my app on JSBin:
App
add a custom filter function
$scope.filterByGenre = function(item){
if (!$scope.selectedGenre || $scope.selectedGenre == 'All'){
return true;
}
return item.genre && item.genre.indexOf($scope.selectedGenre) != -1;
}
change your <select> to this:
<select ng-model="selectedGenre"
ng-options="choice as choice for (idx, choice) in genres"
name="genre"
class="genre-dropdown">
</select>
change <tr ng-repeat="... filters to this:
<tr ng-repeat="movie in movies | filter:searchBar | filter:filterByGenre | orderBy:sortType:sortReverse">
Online Demo - http://jsbin.com/riyafupexu/1/edit?html,js,output
I'm confused, you are using ng-options but you also provided the static options.
For a quick fix in this case you can remove that ng-options and uncomment that All and remove it's value.
Like:
<select ng-model="selectedGenre"
ng-change="handleSelect()"
name="genre"
class="genre-dropdown">
<option selected="selected" value="">All</option>
<option value="Action">Action</option>
<option value="Adventure">Adventure</option>
<option value="Animation">Animation</option>
<option value="Biography">Biography</option>
<option value="Comedy">Comedy</option>
<option value="Crime">Crime</option>
<option value="Drama">Drama</option>
<option value="Fantasy">Fantasy</option>
<option value="History">History</option>
<option value="Horror">Horror</option>
<option value="Romance">Romance</option>
<option value="Sci-Fi">Sci-Fi</option>
<option value="Western">Western</option>
</select>
You can do it this way:
$scope.selectedGenre = "";//set the model to blank.
$scope.genres = 'All,Action,Adventure,Animation,Biography,Comedy,Crime,Drama,Fantasy,History,Horror,Romance,Sci-Fi,Western';
//create an array after splitting the commas
$scope.genresAry = $scope.genres.split(',');
$scope.genresAry.push("");//push blank into the array.
In HTML use genresAry.
<select ng-model="selectedGenre"
ng-options="choice as choice for (idx, choice) in genresAry"
ng-change="handleSelect()"
name="genre"
class="genre-dropdown">
working code here
I could not find any example that suite my problem. I would like to count selected variables from drop down menu using javascript.
My biggest concern is, these drop down menu values are dynamically retrieved from db.The drop down menu is generated multiple times depending on number of student displayed in the form.
This is the codes for drop down menu of examiner name:
<select id="examinerID" name="examinerID">
<option selected disabled>Examiners Name</option>
<%
try{
//connection
String query1="select lecturerID, lecturerFullname from lecturer ";
while(rs1.next())
{
%>
<option value="<%=rs1.getString("lecturerID") %>"><%=rs1.getString("lecturerFullname") %></option>
//close connection and exception
%>
</select>
This is how it actually looks like:
Below the form, I would like to add a list of the examiner (also retrieve from db) and I would like to count how many times an examiner has been selected.
Assume these are the value in drop down menu (to make it easy to understand):
<select id="examinerID" name="examinerID">
<option selected disabled>Examiners Name</option>
<option>Mark</option>
<option>Adam</option>
<option>Lucy</option>
<option>John</option></select>
Expected outcome of counting the selected examiner:
Mark: 2 //assuming Mark has been selected twice
Adam: 1
Lucy: 1
John: 0 //assuming John is not selected to be an examiner
Change Id to class as you are creating multiple instance of select.
For eg:
HTML:-
<select class="examinerID" name="examinerID">
<option selected disabled value="">Examiners Name</option>
<option value="Mark">Mark</option>
<option value="Adam">Adam</option>
<option value="Lucy">Lucy</option>
<option value="John">John</option>
</select>
<select class="examinerID" name="examinerID">
<option selected disabled value="">Examiners Name</option>
<option value="Mark">Mark</option>
<option value="Adam">Adam</option>
<option value="Lucy">Lucy</option>
<option value="John">John</option> </select>
<select class="examinerID" name="examinerID">
<option selected disabled value="">Examiners Name</option>
<option value="Mark">Mark</option>
<option value="Adam">Adam</option>
<option value="Lucy">Lucy</option>
<option value="John">John</option>
</select>
<select class="examinerID" name="examinerID">
<option selected disabled value="">Examiners Name</option>
<option value="Mark">Mark</option>
<option value="Adam">Adam</option>
<option value="Lucy">Lucy</option>
<option value="John">John</option>
</select>
JS:-
var count = {};
var selects = document.querySelectorAll("select[name=examinerID]");
for(var i=0;i<selects.length;i++){
selects[i].addEventListener("change",function(event){
count = {};
Array.prototype.forEach.call(selects, function(select, index) {
var selectedValue = select.value;
if(selectedValue != "")
count[selectedValue] = (count[selectedValue])?count[selectedValue]+1:1;
});
console.log(count)
});
}
Re your HTML:
<select id="examinerID" name="examinerID" onchange="checkLecturer()">
First, remove that id value. If you're outputting that in a loop (as your screenshot suggests), you're creating an invalid document, as id values must be unique.
If your goal is to get the value of the select that changed, pass this into your checkLecturer function:
<select name="examinerID" onchange="checkLecturer(this)">
<!-- Here ----------------------------------------^^^^ -->
...and then in checkLecturer, the first argument will be a reference to the select element:
function checkLecturer(select) {
// Use select.value or select.selectedIndex
}
If your goal is to access the values of all of the select boxes, you can find them with document.querySelectorAll:
var selects = document.querySelectorAll("select[name=examinerID]");
That will give you a NodeList, with a length telling you how many were found. You can access each one as though the NodeList were an array. So for instance, this will show the current value of each of them:
var selects = document.querySelectorAll("select[name=examinerID]");
Array.prototype.forEach.call(selects, function(select, index) {
console.log("#" + index + ": " + select.value);
});
(More on that odd-looking use of forEach in this answer on looping through arrays and array-like things such as NodeLists.)
How can I use required with the below code of select. I had values for all options. As for required to work, default selected option should have empty value. How can I get the required working without removing value of any option? Is there some tweak ?
<select required>
<option value = "-1" selected> </option>
<option value = "1"> one </option>
<option value = "2"> two </option>
</select>
In most modern browsers, a form containing an element with required will not submit until it has a value.
To make select work like that use an empty string as the value for the default item:
<select required>
<option value = "" selected> </option>
<option value = "1"> one </option>
<option value = "2"> two </option>
</select>
Live example: https://jsfiddle.net/zu80u9my/ (Form will not submit if a value has not been selected)
I have a form that builds out multiple widgets based on some JSON data. In part of that form is a select dropdown, and some items have different options selected by default.
ie:
object 1 {
tag: "products"
}
The select dropdown in the ng-repeat widget
<select class="btn-success form-control">
<option value="companies">companies</option>
<option value="news">news</option>
<option value="people">people</option>
<option value="products">products</option>
</select>
^ Here if this was object 1, I'd need the products option to gain the selected attribute.
What I've tried so far, that hasn't worked, but so you can see my thinking:
HTML
ng-repeat="stuff in stuffs"...
<select class="btn-success form-control">
<option value="companies">companies</option>
<option ng-if="widget.selectedTag(stuff.tag)" value="news">news</option>
<option value="people">people</option>
<option value="products">products</option>
</select>
Controller
this.selectedTag= function(s) {
console.log(s);
if (s = 'news'){
return 'selected';
}
}
How would you go about this?
Found answer here: Initializing select with AngularJS and ng-repeat
<option ng-selected="{{operator.value == filterCondition.operator}}"
ng-repeat="operator in operators"
value="{{operator.value}}">
So in my case:
<option value="products"
ng-selected="{{stuff.tag == 'products'}}">products</option>
Thanks for reading my question... ;-)
I'm building a Wordpress site that uses Custom Posts and Custom Fields to show a vehicle inventory. I would like the visitor to be able to filter the posts by Taxonomies...
The plugin I use for drilling the available Taxonomies (Query Multiple Taxonomies) outputs all options it can find for that particular Taxonomy into a dropdown list.
To prevent the dropdown list (i.e. Model) to become too long, I would like to show only those options that are based on the previous selection.
So when the visitor selects Vehicle = Cars, the dropdown for Manufacturer should only show the car manufacturers.
When the visitor selects a manufacturer, i.e. Ford, the next dropdown for selecting a model should only show the models available for the previous selected manufacturer, in this case Ford...
The labels and level-0 values don't change but when I add or change a manufacturer or model, the level-1 and/or level-2 changes.
Not that important but, if possible, it would also be nice to strip everything not needed to show up in the "filtered" dropdown. In case of the Manufacturer dropdown, level-0 and all the spaces are not needed.
In case of the Model dropdown, level-0, level1 and all the spaces are not needed after selection.
Here's a sample how the HTML-code, generated by the plugin, looks like:
<label for="qmt-vehicle">Vehicle:</label>
<select id="qmt-vehicle" name="vehicle">
<option></option>
<option class="level-0" value="cars" >Cars</option>
<option class="level-0" value="motorcycles" >Motorcycles</option>
</select>
<label for="qmt-manufacturer">Manufacturer:</label>
<select id="qmt-manufacturer" name="manufacturer">
<option></option>
<option class="level-0" value="cars" >Cars</option>
<option class="level-1" value="ford" > Ford</option>
<option class="level-1" value="chevrolet" > Chevrolet</option>
<option class="level-0" value="motorcycles" >Motorcycles</option>
<option class="level-1" value="honda" > Honda</option>
<option class="level-1" value="yamaha" > Yamaha</option>
</select>
<label for="qmt-model">Model:</label>
<select id="qmt-model" name="model">
<option></option>
<option class="level-0" value="cars" >Cars</option>
<option class="level-1" value="ford" > Ford</option>
<option class="level-2" value="model-1-ford" > Model 1</option>
<option class="level-2" value="model-2-ford" > Model 2</option>
<option class="level-2" value="model-3-ford" > Model 3</option>
<option class="level-1" value="chevrolet" > Chevrolet</option>
<option class="level-2" value="model-1-chevrolet" > Model 1</option>
<option class="level-2" value="model-2-chevrolet" > Model 2</option>
<option class="level-2" value="model-3-chevrolet" > Model 3</option>
<option class="level-0" value="motoren" >Motorcycles</option>
<option class="level-1" value="honda" > Honda</option>
<option class="level-2" value="model-1-honda" > Model 1</option>
<option class="level-2" value="model-2-honda" > Model 2</option>
<option class="level-2" value="model-3-honda" > Model 3</option>
<option class="level-1" value="yamaha" > Yamaha</option>
<option class="level-2" value="model-1-yamaha" > Model 1</option>
<option class="level-2" value="model-2-yamaha" > Model 2</option>
<option class="level-2" value="model-3-yamaha" > Model 3</option>
</select>
I can do some simple things with Javascript but this is not simple to me, sorry... ;-)
Can someone please help me to figure out how to do this in Javascript/JQuery?
Cross browser would be great!
* EDIT *
The HTML code shows the code send to the browser. Because I cannot modify the plugin that much, I'd like to "manipulate" this code to make it work the way I want to... ;-)
The only fixed things are: Labels for the dropdowns and the Values for all the Class="level-0" elements.
So "Cars" and "Motorcycles" will always stay and never change. BUT from there everything is flexible to change. I.e. when there are no Posts for Chevy's to display, Chevy will not be in the generated HTML. So the plugin only shows dropdown options for the items that are realy there and can be found.
So when there's no Ford available at all, Ford will not be in the dropdown...
I rather not make a predefined list of Manufacurers and their Models.
subscribe to your select elements' onchange events: http://www.w3schools.com/jsref/event_onchange.asp. In the event handler, read the currently selected value and repopulate the other elements accordingly.
I would suggest you hold the data in javascript so you only need to show the necessary options for each model without having to hide some..
I put this on jsfiddle but the site keeps breaking.
The code below was tested and works though.
Ok Works now:
<script type="text/javascript">
var vehicles = {"Cars": {
"Ford" : [ "Fiesta", "Focus", "Fusion"],
"Chevy": [ "Malibu", "Corvette", "Tahoe"],
},
"Motorcycles": {
"Honda": ["model 1", "model 2", "model 3"],
"Yamaha": ["model 1", "model 2", "model 3", "model 4"]
}
};
$(document).ready(function() {
var $vehiclesList = $("#qmt-vehicle");
var $manufList = $("#qmt-manufacturer");
var $modelList = $("#qmt-model");
var selectedType = null
var selectedManuf = null;
$.each(vehicles, function(key, vehicle) {
$vehiclesList.append($("<option/>", {value:key,text:key}));
});
$vehiclesList.bind("change", function() {
selectedType = $(this).val();
if (selectedType && vehicles[selectedType]) {
var manufacturers = vehicles[selectedType];
$("#qmt-manufacturer option").not(":first").remove();
$("#qmt-model option").not(":first").remove();
$.each(manufacturers, function(key, manufacturer) {
$manufList.append($("<option/>", { value: key, text: key}));
});
}
});
$manufList.bind("change", function() {
var selectedManuf = $(this).val();
$("#qmt-model option").not(":first").remove();
if (selectedManuf && vehicles[selectedType] && vehicles[selectedType][selectedManuf]) {
var models = vehicles[selectedType][selectedManuf];
$.each(models, function(key, model) {
$modelList.append($("<option/>", { value: model, text: model}));
});
}
});
});
</script>
Then in your page you'd have
<label for="qmt-vehicle">Vehicle:</label>
<select id="qmt-vehicle" name="vehicle">
<option></option>
</select>
<label for="qmt-manufacturer">Manufacturer:</label>
<select id="qmt-manufacturer" name="manufacturer">
<option></option>
</select>
<label for="qmt-model">Model:</label>
<select id="qmt-model" name="model">
<option></option>
</select>