I have created a option list in a webpage where I want to open the select list with a button created with a <div> when a option selected from the list then the selected value comes on the div also.
So here I want the javascript attribute to open the list on button click something like this
document.getElementById('selectedlist').open.
any body have suggestion about this?
Take a look at http://code.google.com/p/expandselect/. I think this is what you want.
Then you can open the select like this.
ExpandSelect("myselect_id")
Here is the simple Javascript code to open(toggle) the select box on clicking the button.
<script type="text/javascript">
function expandSelect(id){
var select_flag = document.getElementById('select_flag').value;
if(select_flag==1){
var select_box = document.getElementById(id);
select_box.size = 1;
document.getElementById('select_flag').value = 0;
}else{
var select_box = document.getElementById(id);
select_box.size = select_box.options.length;
document.getElementById('select_flag').value = 1;
}
}
</script>
<button onclick="expandSelect('select_box')"> Toggle Select Box </button>
<div id="container">
<select name="select_box" id="select_box" >
<option value="">Select</option>
<option value="">option1</option>
<option value="">option2</option>
<option value="">option3</option>
<option value="">option4</option>
<option value="">option5</option>
<option value="">option6</option>
</select>
<input type="hidden" name="select_flag" id="select_flag" value="0">
</div>
Related
I want to create a dropdown box with a few items. Once the user selects the item and clicks the '+' button, the item is added below to a 'basket' section. They should be able to add multiple items over and over.
document.getElementById("button").onclick = function() {
var a = document.getElementById("selection");
var item = a.options[a.selectedIndex].text;
document.getElementById("basket").innerHTML = item;
var counter = 1;
while (counter <= 1) {
var list = document.write(item);
counter++;
}
}
<h1>Select your items!</h1>
<form id="myForm">
<p>Item:
<select id="selection">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
<button id="button">+</button></p>
</form>
<br><br><br>
<h1>Basket</h1>
<p id="basket"></p>
When the button is pressed, all current content disappears and the item selected appears on its own.
The button in the form has no type="button". Therefore it is used as submit button and that's why you get the blank page.
You don't need a loop.
Example
var button = document.getElementById("button");
var select = document.getElementById("select");
var basket = document.getElementById("basket");
// Add text
function addToBasket() {
var li = document.createElement("li");
li.innerHTML = select.options[select.selectedIndex].text;
basket.appendChild(li);
}
button.addEventListener("click", addToBasket);
<h1>Select your items!</h1>
<form id="myForm">
<p>Item:
<select id="select">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
<button id="button" type="button">+</button></p>
</form>
<h1>Basket</h1>
<ul id="basket"></ul>
You are not concatenating them. document.getElementById("basket").innerHTML = item; removes everything in the basket and add only the selected one.
Use this to concatenate the new item with what already exists in the basket document.getElementById("basket").innerHTML += item;. You can style it to make the basket look nice.
I am trying to create a webpage where the content changes depending on which drop down options the user has selected. Once the user has made his first choice, the content of a drop down menu can be an additional nested drop down menu with another choice the user must make.
I am now trying to figure out how I can pre-select options by passing parameters in the URL for both the first drop down and a number of nestet drop downs.
I have the basic functionality down. Here's my HTML:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js_select.js"></script>
<script type="text/javascript" src="js_drop.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
<select id="select" class="div-toggle" data-target=".my-info-1">
<option id="one" value="noselection" data-show=".noselection">
Choose option
</option>
<option id="two" value="2015" data-show=".2015">
2015
</option>
<option id="three" value="2014" data-show=".2014">
2014
</option>
</select>
<div class="my-info-1">
<div class="noselection hide">
No choice made
</div>
<div class="2015 hide">
2015
</div>
<div class="2014 hide">
A nested drop down within the 2014 selection:<br><br>
<select id="select" class="div-toggle" data-target=".my-info-2">
<option id="one" value="noselection2" data-show=".noselection2">
Choose option
</option>
<option id="two" value="s1" data-show=".s1">
January
</option>
<option id="three" value="s2" data-show=".s2">
February
</option>
</select>
<div class="my-info-2">
<div class="noselection2 hide">
No choice made
</div>
<div class="s1 hide">
Information about January
</div>
<div class="s2 hide">
Information about February
</div>
</div>
</div>
</div>
Here's my css.css:
.hide {
display: none;
}
And here's js_drop.js that makes content appear depending on the user selection. I found the script here: Change the content of a div based on selection from dropdown menu:
$(document).on('change', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("option:selected", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('change');
});
I am now adding functionality to make it possible to link to a specific drop down selection and any nested selections by adding parameters to the URL, like in:
http://example.com/page.html?select=three&selectnested=two
I am using js_select.js for this function. I found the code here: How to create a hyperlink that directs to a page with pre-selected option in a drop-down menu?
$(document).ready(function() {
var select = GetUrlParameter("select");
$("#" + select).attr("selected", "");
});
function GetUrlParameter(name) {
var value;
$.each(window.location.search.slice(1).split("&"), function (i, kvp) {
var values = kvp.split("=");
if (name === values[0]) {
value = values[1] ? values[1] : values[0];
return false;
}
});
return value;
}
My guess at a solution would be to:
Change id on my second <select> to id="selectnested"
Add the following code to my js_select.js above the function
The code:
$(document).ready(function() {
var select = GetUrlParameter("selectnested");
$("#" + select).attr("selected", "");
});
But this solution does not choose a selection with-in the nested drop down when the page loads using my example URL above.
Any hint on solving this would be much appreciated.
The issue is that you have multiple elements with the same ID (both <select>s have the ID "select", the <option>s have repeated IDs "one", "two" and "three").
Change the IDs of the <select> and <option> elements so they don't conflict with each other.
Example:
<select id="select" class="div-toggle" data-target=".my-info-1">
<option id="select-one" value="noselection" data-show=".noselection">
Choose option
</option>
<option id="select-two" value="2015" data-show=".2015">
2015
</option>
<option id="select-three" value="2014" data-show=".2014">
2014
</option>
</select>
...
<select id="nested" class="div-toggle" data-target=".my-info-2">
<option id="nested-one" value="noselection2" data-show=".noselection2">
Choose option
</option>
<option id="nested-two" value="s1" data-show=".s1">
January
</option>
<option id="nested-three" value="s2" data-show=".s2">
February
</option>
</select>
This way, in your initialization function, you can do:
$(document).ready(function() {
// First selection menu options
var select = GetUrlParameter("select");
$("#select-" + select).attr("selected", "");
// "Nested" selection menu options
var select = GetUrlParameter("selectnested");
$("#nested-" + select).attr("selected", "");
});
And due to those prefixes (select- and nested-) jQuery will only find one element with that ID, and you'll hopefully have no more trouble!
I have a form, where you can dynamically add steps by clicking a button. Each step contains different input fields. One step has a ,which is filled with some options like this.
<select id="zutatenListe" name="zutatenListe" onchange="updateZutaten()">
<option value="0">Tomate</option>
<option value="1">Brot</option>
</select>
It is possible that there are multiple of it, all with the same id and name.
Next to the select, there is always an input field like this:
<input id="selectedZutat" type="text" value="" name="wiegen_zutat[]">
What I want to make is that when you change the selected option, your selected option will be shown only in the input element next to the changed select. It works for the first one, but for all other selects, it doesn't. My code is this:
function updateZutaten(){
var eingabe;
eingabe = $("#zutatenListe option:selected").text();
$( "#selectedZutat").val(eingabe);
}
My guess is that it only works for the first select element, because the other select elements have the same id. Has anyone an idea how to take care of this problem?
Please don't get confused by the German names, but I'm from Germany.
Thank you everyone :)
Identifiers must be unique and as you are using jquery bind event using it.
Add a common class to target the <select> element, this will help you select them using Class Selector (".class") and bind event using it, then you can use .next() target the next <input> element.
Here in exmple I have added zutatenListe class to <select> element.
$(function() {
$(document).on('change', '.zutatenListe', function() {
var text = $(this).find("option:selected").text();
$(this).next(".selectedZutat").val(text);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select class="zutatenListe" name="zutatenListe">
<option value="0">Tomate</option>
<option value="1">Brot</option>
</select>
<input class="selectedZutat" type="text" value="" name="wiegen_zutat[]">
</div>
<div>
<select class="zutatenListe" name="zutatenListe">
<option value="0">Tomate</option>
<option value="1">Brot</option>
</select>
<input class="selectedZutat" type="text" value="" name="wiegen_zutat[]">
</div>
Maybe work on the change() event?
$("#zutatenListe").change( function () {
var eingabe;
eingabe = $("#zutatenListe option:selected").text();
$( "#selectedZutat").val(eingabe);
})
So it will always set the selected option when the change event fires?
Use unique ID attributes for each set of input and selects. HTML and Jquery require this.
HTML4 Spec
HTML5 Spec
Here's a way to do it in JavaScript.
function updateZutaten(element) {
var option = element.options[element.selectedIndex];
var parent = element.parentElement;
var textBox = parent.getElementsByTagName("input")[0];
textBox.value = option.text;
}
.formItems {
list-style-type:none;
padding:0;
margin:0;
}
.formItems li {
border-bottom:1px solid #EEE;
padding: 10px 0;
}
<form id="myForm">
<ul class='formItems'>
<li>
<select id="zutatenListe"
name="zutatenListe"
onchange="updateZutaten(this)">
<option value="">--Choose--</option>
<option value="0">Tomate</option>
<option value="1">Brot</option>
</select>
<input id="selectedZutat"
type="text" value=""
name="wiegen_zutat[]"
/>
</li>
<li>
<select id="zutatenListe"
name="zutatenListe"
onchange="updateZutaten(this)">
<option value="">--Choose--</option>
<option value="0">Tomate</option>
<option value="1">Brot</option>
</select>
<input id="selectedZutat"
type="text" value=""
name="wiegen_zutat[]"
/>
</li>
</ul>
</form>
Say I want to create a double drop down select options where the second drop down list changes according to which the first drop down option is selected. I've already figured out how to do this. BUT one of my first drop option is "Others" and I want an input textbox to appear if I select "others" in the first dropdown list instead of having a second drop down option list. So far, I've been able to get the input textbox to appear, but the second drop down option list also appears (as undefined). How do I make the second drop down option list disappear?? Also, if one of the options in the first dropdown list doesn't need or have a second drop down option list, how do I code this?
This is an example of my script (I only changed the names of the categories):
<form name="search" method="get">
<select name="cat" id="cat" size="1" onChange="redirect(this.options.selectedIndex)">
<option selected disabled>Category</option>
<option value="fruit">Fruit</option>
<option value="music">Music</option>
<option value="vegetable">Vegetable</option>
<option value="book">Book</option>
<option value="other">Other</option>
</select>
<input type='text' id="other" class="hidden" />
<select name="cat2" size="1">
<option selected disabled>Sub-category</option>
</select>
<input type="button" name="Search" value="Search" onClick="go()" /
</form>
This is my javascript:
$('#cat').change(function(){
var selected_item = $(this).val()
if(selected_item == "other"){
$('#other').val("").removeClass('hidden');
}else{
$('#other').val(selected_item).addClass('hidden');
}
});
var groups=document.search.cat.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()
group[0][0]=0
group[1][0]=new Option("Moodle")
group[1][1]=new Option("Ultranet")
group[1][2]=new Option("Private School")
group[2][0]=new Option("Gmail")
group[2][1]=new Option("Windows Live")
group[2][2]=new Option("Office 365")
group[3][0]=0 //has no second dropdown option, how do I make it disappear?
group[4][0]=new Option("Kamar")
group[4][1]=new Option("Musac")
group[5][0]=new Option("Windows")
group[5][1]=new Option("Mac")
group[5][2]=new Option("Novell")
group[5][3]=new Option("Linux")
group[6][0]=new Option("Ruckus Wireless")
group[6][1]=new Option("Aerohive Networks")
group[6][2]=new Option("Aruba Networks")
group[7][0]=new Option("Pre-Trial")
group[7][1]=new Option("Implementation")
group[7][2]=new Option("Full Trial")
group[8][0]=0 //The 'others', I don't know what to put here to make this disappear
var temp=document.search.cat2
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}
function go(){
location=temp.options[temp.selectedIndex].value
}
You need to add 2 new lines to the .change function, from:
$('#cat').change(function(){
var selected_item = $(this).val()
if(selected_item == "other"){
$('#other').val("").removeClass('hidden');
}else{
$('#other').val(selected_item).addClass('hidden');
}
});
Change it to
$('#cat').change(function(){
var selected_item = $(this).val()
if(selected_item == "other"){
$('#other').val("").removeClass('hidden');
$("select[name=cat2]").addClass('hidden');
}else{
$('#other').val(selected_item).addClass('hidden');
$("select[name=cat2]").removeClass('hidden');
}
});
So when you remove hidden class from the input you have to add it to the select with name "cat2", and vice-versa. Hope this helps you.
I need to add more copies of my drop down box on the html everytime I click the "add" button and I can only do this for 5 times.
function AddVCD()
{
var cdcounter = 0;
var opt = document.createElement('option');
document.getElementById("vcdchoice").innerhtml("Pitch Perfect");
document.getElementById("vcdchoice").innerhtml("500 Days of Summer");
document.getElementById("vcdchoice").innerhtml("The Notebook");
document.getElementById("vcdchoice").innerhtml("The Vow");
document.getElementById("vcdchoice").innerhtml("Lincoln");
cdcounter++;
}
This is my code for the drop down box to be duplicated whenever I click a button
<select id = "vcdchoice">
<option value="movie1">Movie1</option>
<option value="movie2">Movie2</option>
<option value="movie3">Movie3</option>
<option value="movie4">Movie4</option>
<option value="movie5">Movie5 </option>
</select>
This is the code of my button.
<button type = "button" id = "addVCD" onclick="AddVCD()"> ADD ANOTHER VCD </button>
I think there is something wrong with my javascript. Yep, definitely.