I need some help. I'm trying to get the length of the selected options in my elements with the "no" class(meaning getting the number of selected options with the no class name. Copy and paste in browser to see what I am talking about and select the options yourself to see).
here is my html
function Starting(e) {
e.preventDefault();
var artchoices = document.querySelectorAll(".art");
var program = document.querySelectorAll(".program");
var choice = document.querySelectorAll(".choice");
var no = document.querySelectorAll(".no");
var music = document.querySelectorAll(".music");
var allchoices;
for (var e = 0; e < choice.length; e++) {
if (choice[e].selected == true) {
allchoices = true;
break;
}
}
if (allchoices)
console.log("Please make sure all options are selected");
else {
if (no.length.selected >= choice.length)
console.log("hello");
}
return false;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="quiz" content="myown quiz">
<title>Quiz</title>
</head>
<body>
<script type="text/javascript" src="machine.js"></script>
<link rel="stylesheet" type="text/css" href="quizformatting.css">
<h1>Choose the major right for you</h1>
<pre>
<form>
Do you like enjoy programming?
<select>
<option class="choice">Select a value</option>
<option class="program">Yes</option>
<option class="no">No</option>
</select>
Do you enjoy 2d animation and 3d animation?
<select>
<option class="choice">Select a value</option>
<option class="art">Yes</option>
<option class="no">no</option>
</select>
Do you like music
<select>
<option class="choice">Select a value</option>
<option>Yes</option>
<option class="no">no</option>
</select>
What are your favorite pastimes?
<select>
<option class="choice">Select a value</option>
<option class="music">Listening to music</option>
<option>making websites</option>
<option class="art">Drawing</option>
<option class="no">None of these</option>
</select>
Out of all the activities you like to do, which one do you enjoy the most?
<select>
<option class="choice">Select a value</option>
<option class="art">Painting and drawing</option>
<option class="music">Playing instruments</option>
<option class="art">Drawing</option>
<option class="no">None of these</option>
</select>
Would you be interested in making art or coding for video games?
<select>
<option class="choice">Select a value</option>
<option class="program">I would be interested in learning the programming
languages used to create the scripting for games</option>
<option class="art">I would like to the models and the environment for
modeling</option>
<option class="no">I'm not interested in either of these options</option>
</select>
Do you enjoy making websites or learning how to sing?
<select>
<option class="choice">Select a value</option>
<option class="music">Learning how to sing</option>
<option class="program">making websites for projects</option>
<option class="no">I'm not interested in any of this</option>
</select>
Do you enjoy listening to music more or making programming applications?
<select>
<option class="choice">Select a value</option>
<option class="music">I would like to listen to music</option>
<option class="program">Programming is my thing</option>
<option class="art">I'm more of a drawer</option>
<option class="no">I don't like any of these options</option>
</select>
Which skillset are you more interested in learning?
<select>
<option class="choice">Select a value</option>
<option class="music">Learning the notes of instruments</option>
<option class="program">Learning the language of javascript</option>
<option class="art">I like anime, so I would love to learn how to animate in
anime style</option>
<option class="no">I don't want to do any of these options</option>
</select>
Please press the button to get your answer
<button onclick="Starting(event);">Click me</button>
</form>
</pre>
</body>
</html>
Here is my javascript file:
You can use the :checked pseudo-class to find all of the option elements that are selected. In this case, I've changed the selector you've used in querySelectorAll so that no only has the selected options with the class "no".
As #PatrickRoberts mentions in the comments, using a value attribute is a better idea. For one thing it is semantically correct (options should have a value for form submission).
function Starting(e) {
e.preventDefault();
var artchoices = document.querySelectorAll(".art");
var program = document.querySelectorAll(".program");
var choice = document.querySelectorAll(".choice");
var no = document.querySelectorAll(".no:checked");
var music = document.querySelectorAll(".music");
var allchoices;
for (var e = 0; e < choice.length; e++) {
if (choice[e].selected == true) {
allchoices = true;
break;
}
}
if (allchoices)
console.log("Please make sure all options are selected");
else {
if (no.length >= choice.length)
console.log("hello");
}
return false;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="quiz" content="myown quiz">
<title>Quiz</title>
</head>
<body>
<script type="text/javascript" src="machine.js"></script>
<link rel="stylesheet" type="text/css" href="quizformatting.css">
<h1>Choose the major right for you</h1>
<pre>
<form>
Do you like enjoy programming?
<select>
<option class="choice">Select a value</option>
<option class="program">Yes</option>
<option class="no">No</option>
</select>
Do you enjoy 2d animation and 3d animation?
<select>
<option class="choice">Select a value</option>
<option class="art">Yes</option>
<option class="no">no</option>
</select>
Do you like music
<select>
<option class="choice">Select a value</option>
<option>Yes</option>
<option class="no">no</option>
</select>
What are your favorite pastimes?
<select>
<option class="choice">Select a value</option>
<option class="music">Listening to music</option>
<option>making websites</option>
<option class="art">Drawing</option>
<option class="no">None of these</option>
</select>
Out of all the activities you like to do, which one do you enjoy the most?
<select>
<option class="choice">Select a value</option>
<option class="art">Painting and drawing</option>
<option class="music">Playing instruments</option>
<option class="art">Drawing</option>
<option class="no">None of these</option>
</select>
Would you be interested in making art or coding for video games?
<select>
<option class="choice">Select a value</option>
<option class="program">I would be interested in learning the programming
languages used to create the scripting for games</option>
<option class="art">I would like to the models and the environment for
modeling</option>
<option class="no">I'm not interested in either of these options</option>
</select>
Do you enjoy making websites or learning how to sing?
<select>
<option class="choice">Select a value</option>
<option class="music">Learning how to sing</option>
<option class="program">making websites for projects</option>
<option class="no">I'm not interested in any of this</option>
</select>
Do you enjoy listening to music more or making programming applications?
<select>
<option class="choice">Select a value</option>
<option class="music">I would like to listen to music</option>
<option class="program">Programming is my thing</option>
<option class="art">I'm more of a drawer</option>
<option class="no">I don't like any of these options</option>
</select>
Which skillset are you more interested in learning?
<select>
<option class="choice">Select a value</option>
<option class="music">Learning the notes of instruments</option>
<option class="program">Learning the language of javascript</option>
<option class="art">I like anime, so I would love to learn how to animate in
anime style</option>
<option class="no">I don't want to do any of these options</option>
</select>
Please press the button to get your answer
<button onclick="Starting(event);">Click me</button>
</form>
</pre>
</body>
</html>
Here is my javascript file:
If you have access to jQuery, you can use the following script:
$('form option.no:selected').length
Related
Okay guys, I have a problem. For some reason my JavaScript file isn't keeping track on how many times the user choose the "no" class when he selects an option in the select tags. I'm trying to make it so that when the user selects no in the dropdown list,it keeps track of how many times the user selected no. Any idea on how to keep track how many times the user selects no without Jquery in javascript?
<head>
<meta charset="utf-8" />
<meta name="quiz" content="myown quiz" />
<title>Quiz</title>
</head>
<body>
<script type="text/javascript" src="machine.js"></script>
<link rel="stylesheet" type="text/css" href="quizformatting.css">
<h1>Choose the major right for you</h1>
<pre>
<form>
Do you like enjoy programming?
<select>
<option class="choice">Select a value</option>
<option class="program">Yes</option>
<option class="no">No</option>
</select>
Do you enjoy 2d animation and 3d animation?
<select>
<option class="choice">Select a value</option>
<option class="art">Yes</option>
<option class="no">no</option>
</select>
Do you like music
<select>
<option class="choice">Select a value</option>
<option>Yes</option>
<option class="no">no</option>
</select>
What are your favorite pastimes?
<select>
<option class="choice">Select a value</option>
<option class="music">Listening to music</option>
<option class="program">making websites</option>
<option class="art">Drawing</option>
<option class="no">None of these</option>
</select>
Out of all the activities you like to do, which one do you enjoy the most?
<select>
<option class="choice">Select a value</option>
<option class="art">Painting and drawing</option>
<option class="music">Playing instruments</option>
<option class="art">Drawing</option>
<option class="no">None of these</option>
</select>
Would you be interested in making art or coding for video games?
<select>
<option class="choice">Select a value</option>
<option class="program">I would be interested in learning the programming languages used to create the scripting for games</option>
<option class="art">I would like to the models and the environment for modeling</option>
<option class="no">I'm not interested in either of these options</option>
</select>
Do you enjoy making websites or learning how to sing?
<select>
<option class="choice">Select a value</option>
<option class="music">Learning how to sing</option>
<option class="program">making websites for projects</option>
<option class="no">I'm not interested in any of this</option>
</select>
Do you enjoy listening to music more or making programming applications?
<select>
<option class="choice">Select a value</option>
<option class="music">I would like to listen to music</option>
<option class="program">Programming is my thing</option>
<option class="art">I'm more of a drawer</option>
<option class="no">I don't like any of these options</option>
</select>
Which skillset are you more interested in learning?
<select>
<option class="choice">Select a value</option>
<option class="music">Learning the notes of instruments</option>
<option class="program">Learning the language of javascript</option>
<option class="art">I like anime, so I would love to learn how to animate in anime style</option>
<option class="no">I don't want to do any of these options</option>
</select>
Please press the button to get your answer
<button type="button" onclick="Starting();">Click me</button>
</form>
</pre>
<p id="yos">Your answer here</p>
Here is my javascript code:
```javascript
function Starting() {
var artchoices = document.querySelectorAll(".art:checked");
var program = document.querySelectorAll(".program:checked");
var choice = document.querySelectorAll(".choice");
var no = document.querySelectorAll(".no:checked");
var music = document.querySelectorAll(".music:checked");
var x = document.getElementById("yos");
var answer = true;
for (var e = 0; e < choice.length; e++) {
if (choice[e].selected == true) {
answer = false;
break;
}
}
if (answer == false) {
console.log("Make sure you checked all values");
} else {
if (no == 9) {
console.log("Oh, so you don't want to become anything huh");
x.innerHTML = "HEY";
} else {
if (program > artchoices) {
console.log("Congrulations, you are an artist");
}
}
}
window.onload = Starting;
}
You need to check for the length of the list. The node list (what is returned by document.querySelectorAll(".no:checked")) will never equal 9.
if (no == 9)
needs to be
if (no.length === 9)
I have three drop down selected values as you can see below.
How can I say for example if car = volvo and color = Black and name = Jone // do something or alert (cool) in JavaScript?
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="black">black</option>
<option value="green">green</option>
</select>
<select>
<option value="'mark">'mark</option>
<option value="jones">jones</option>
<option value="james">james</option>
<option value="Vardy">Vardy</option>
</select>
It would have been very easy with angular js by two way binding and applying same valuechange listener on all the three dropdowns.
However, here also you can provide 3 different ids to your dropdowns and bind them with same value-change listener using onchange attribute.
In the value-change listener function , get the value of all the 3 drop down value by document.getElementById , comapre them and display alert accordingly. You can find below the sample solution for it which I prepared:
<head>
<script>
function dropdownChange() {
var car=document.getElementById("car").value;
var color=document.getElementById("color").value;
var owner=document.getElementById("owner").value;
if(car==="volvo" && color==="red" && owner ==="james") {
alert("Cool");
}
}
</script>
</head>
<body>
<select id ="car" onchange="dropdownChange();">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select id="color" onchange="dropdownChange();">
<option value="red">red</option>
<option value="blue">blue</option>
<option value="black">black</option>
<option value="green">green</option>
</select>
<select id="owner" onchange="dropdownChange();">
<option value="'mark">'mark</option>
<option value="jones">jones</option>
<option value="james">james</option>
<option value="Vardy">Vardy</option>
</select>
</body>
I am designing a webform that may capture anywhere from 1 to 150 rows of data giving definitions to what type of data is provided in a given row of a csv. These rows of data are all exactly same but I do not know how many of them will be used at the outset. I would like to start with one row and let the end user click an add button to add a new row. On the W-3 schools website there was a small tutorial on how to do this:
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_select_create
but there are some problems I am seeing. first, it is buggy. If you go to the link and click the 'try it' button it will create a simple select dropdown. Wonderful! However, If you click it again it then creates a blank one, with every subsequent click creating the same. The other problem is that the select element I would need to use is huge (160 possible options) and uses optgroups to keep it separated and intuitive here is a sample:
<select name="data_value" id="data_value_selector">
<optgroup label="Entity Provider">
<option style="margin-left:12px;" value="name">Name</option>
<option style="margin-left:12px;" value="dba">DBA</option>
<option style="margin-left:12px;" value="facility_type">Facility Type</option>
</optgroup>
<optgroup label="Individual Provider"></optgroup>
<optgroup style="margin-left:12px;" label="Name">
<option value="full_name">Full Name</option>
<option value="name_prefix">Prefix</option>
<option value="first_name">First Name</option>
<option value="middle_name">Middle Name</option>
<option value="last_name">Last Name</option>
<option value="name_suffix">Suffix</option>
<option value="pro_suffix">Professional Suffix</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Birth Date">
<option value="full_birth_date">Full Birth Date</option>
<option value="day_of_birth">Day Of Birth</option>
<option value="month_of_birth">Month Of Birth</option>
<option value="year_of_birth">Year Of Birth</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Education">
<option value="education_institution">Education Institution</option>
<option value="education_city">Education City</option>
<option value="education_county">Education County</option>
<option value="education_state">Education State</option>
<option value="education_country">Education Country</option>
<option value="education_start_date">Education Start Date</option>
<option value="education_end_date">Education End Date</option>
<option value="graduation_date">Graduation Date</option>
<option value="degree" >Degree</option>
</optgroup>
<optgroup label="Provider Information"></optgroup>
<optgroup style="margin-left:12px;" label="Address">
<option value="full_address">Full Address</option>
<option value="address_1">Address 1</option>
<option value="address_2">Address 2</option>
<option value="address_city">City</option>
<option value="address_county">County</option>
<option value="address_state">State</option>
<option value="address_zip_code">Zipcode</option>
<option value="address_country">Country</option>
<option value="address_csz">City/State/Zip</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Phone">
<option value="phone_number">Number</option>
<option value="phone_extension">Extension</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Singular Values">
<option value="url">URL</option>
<option value="tin">TIN Number</option>
<option value="email">Email</option>
<option value="dea_registration_number">DEA Regisration Number</option>
<option value="npi_number">NPI Number</option>
<option value="upin_number">UPIN Number</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Provider Values">
<option value="provider_value">Provider Value</option>
</optgroup>
</select>
...And this is not even the entire select object. In the W-3 tutorial it builds each element independently as variables and adds them to each other individually. As you can see this might take some time to write and just seems very bulky. I would like to define the select object once and have it replicated that way (if possible) with every click. I imagine each newly created select object would need a unique name, but I am not 100% sure on that. If that is the case, is there a way to just append a 1 to the name of the first one and so on?
If you want something in jQuery you can use clone() function. See:
$("#data_value_selector").clone().appendTo("#select-box");
Demo.
I changed the name attribute to send a collection of the selected values. You can change this behaviour to a custom name in the click event, if you want:
var newSelect = $("#data_value_selector").clone();
newSelect.attr("name", "newName");
newSelect.appendTo("#select-box");
I hope this helps you.
You could use the cloneNode() method. Here is an example:
http://jsfiddle.net/JKNT4/7/
HTML
<button onclick="addRow()">Add Row</button>
<div id="parent_selector" class="data-row">
<select name="data_value[]">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div id="child_selectors"></div>
Javascript
function addRow() {
var itm = document.getElementById("parent_selector");
var cln = itm.cloneNode(true);
cln.removeAttribute("id");
document.getElementById("child_selectors").appendChild(cln);
}
I want to know using native html element select can I do this add (submenus)
Processes
lack of process
failure to follow process
HTML
<!DOCTYPE html>
<html>
<body>
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</body>
</html>
The code above just allows me to define sub-sections, but no seperate menu ui in parent ui? Is there a way I can change this.
thanks
No, standard selects do not allow for sub-menus, but there are some fairly simple jQuery solutions that use unordered lists.
These are both pretty good / simple solutions:
http://www.givainc.com/labs/mcdropdown_jquery_plugin.cfm
http://p.sohei.org/jquery-plugins/clickmenu/
Not using native HTML that I'm aware of, however you could use jQuery to do this.
<Select id="cartype">
<option value="Select">Select Car Type</option>
<option value="Swedish Cars">Swedish Cars</option>
<option value="German Cars">German Cars</option>
</Select>
<select id="carDetail">
<option value="unset">Select Car Type First</option>
</select>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready( function () {
$.fn.addOption = function(optText, optValue){
var option = new Option(optText, optValue);
return this.append(option);
};
$("#cartype").change(function() {
$("#carDetail option").remove();
switch ($("#cartype").val())
{
case "Swedish Cars":
$("#carDetail").addOption("Volvo", "volvo");
$("#carDetail").addOption("Saab", "saab");
break;
case "German Cars":
$("#carDetail").addOption("Mercedes","mercedes");
$("#carDetail").addOption("Audi","audi");
break;
default:
$("#carDetail").addOption("Select Car Type First","unset");
}
});
});
</script>
I recently posted a related question copying selected option to another select.
I realised that what I'm trying to do is more straightforward but I hope I'm not breaking forum rules by "double posting" because this question is slightly different. Here goes. I want "productchoice" to affect "productchoice2".
<select id="productchoice">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
<select id="productchoice2">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
My question is: when "productchoice" is changed, what javascript should I put in to make "productchoice2" reflect the same choice?
Thanks for your help again, kind people!
HTML
<select id="productchoice" onchange="productchoicechange()">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
<select id="productchoice2">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
JS
jsfiddle by index
// by index
function productchoicechange(){
var productchoice = document.getElementById("productchoice");
var productchoice2 = document.getElementById("productchoice2");
productchoice2.options[productchoice.options.selectedIndex].selected = true;
}
jsfiddle by value
// by value
function productchoicechange(){
var productchoice = document.getElementById("productchoice");
var productchoice2 = document.getElementById("productchoice2");
productchoice2.value = productchoice.value;
}
Using pure JS you can do this:
var select_element = document.getElementById('productchoice');
select_element.onchange = function(e){
document.getElementById('productchoice2').value = this.options[this.selectedIndex].value;
}
Demo: http://jsfiddle.net/tymeJV/Zayq4/
if you'd like to use jQuery
$('#productchoice').change(function (){
$('#productchoice2').val($(this).val());
});
JSFiddle
Try using angularJS
JSFiddle:-http://jsfiddle.net/adiioo7/xUPZv/
HTML:-
<html ng-app>
<body>
<select id="productchoice" ng-model="selection">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
<select id="productchoice2" ng-model="selection">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>