Is there a way to insert values in a drop down menu with a simple form? I have this drop down menu
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a category:</option>
<option value="movie">Movie</option>
<option value="musik">Musik</option>
<option value="books">Books</option>
<option value="images">Images</option>
</select>
</form>
Should I use an array? I been searching the net but couldn't find anything that would help.
Here is a JavaScript solution to add items to a drop down.
The HTML to use..
<form>
<select id="categories" name="users" onchange="showUser(this.value)">
<option value="">Select a category:</option>
<option value="movie">Movie</option>
<option value="musik">Musik</option>
<option value="books">Books</option>
<option value="images">Images</option>
</select>
</form>
JavaScript code...
var categories = document.getElementById("categories");
var newOption = document.createElement('option');
newOption.innerText = "New value";
newOption.setAttribute('value', 'newvalue');
categories.appendChild(newOption);
jQuery code... (a lot shorter)
$("#categories").append("<option value='newvalue'>New Value</option>");
Here is the JavaScript JSFiddle and the jQuery JSFiddle to play with!
You could look into jQuery append() and option() with click event...
I've just created a working solution for you.
Don't know if this is what you was looking for, but this is how it works:
You simply just write the value and visual option name into a form text field: value, text which gives you this:
<option value="value">text</option>
<select id="mySelect"></select>
<p> </p>
<input type="text" id="string"><br>
<button id="append">Append</button>
$('#append').click(function(){
var str = $('#string').val();
var substr = str.split(', ');
$('#mySelect').append( new Option(substr[0],substr[1]));
});
Here is a working version: http://jsfiddle.net/SCf8m/1/
Related
I have the following drop down menu.
<select id="MySelectMenu">
<option value="#">-*-*- Main Accounts -*-*-</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.example.com">Example</option>
</select>
Is it possible for me to add two text input fields where the visitor can populate the menu options themselves?
For example, in text field one they input the url for the option, and text field two, they input the name of the option.
So...
Text field one: http://www.randomwebsite.com
Text field two: Random Website
Then an 'Add' button, which would result in this...
<select id="MySelectMenu">
<option value="#">-*-*- Main Accounts -*-*-</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.example.com">Example</option>
<option value="http://www.randomwebsite.com">Random Website</option>
</select>
This is the javascript for the current menu, if this helps.
<script type="text/javascript">
function newSrc() {
var e = document.getElementById("MySelectMenu");
var newSrc = e.options[e.selectedIndex].value;
document.getElementById("MyFrame").src=newSrc;
}
</script>
Thanks in advance.
Yes Create two textboxes and Add id's to them and also create a button with a onclick function "Add", Then use the following javascript which is nothing but creating the option and appending to selectbox
function Add()
{
var x = document.getElementById("MySelectMenu");
var opt = document.createElement("option");
opt.value= document.getElementById("url").value;
opt.innerHTML = document.getElementById("name").value; // whatever property it has
x.add(opt);
}
<select id="MySelectMenu">
<option value="#">-*-*- Main Accounts -*-*-</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.example.com">Example</option>
</select>
<input type="text" name="name" id="name">
<input type="url" name="url" id="url">
<button onclick="Add()">ADD</button>
Try below code
var url=$("#txtUrl").val();
var textValue = $("#txtDisplay").val();
$('#MySelectMenu').append("<option value='"+url+"'>"+textValue+"</option>);
use this code on OnClick event of Add button.
I'm trying to achieve one simple requirement, but couldn't make it!
My requirement is very simple - wanna display some alert to the user based on the options he selects from the drop down.
Below is the code, I've designed now. Please check and correct me where I'm going wrong.
<SCRIPT type="text/javascript">
var txt = this.getField("ddPortfolio").value;
If(txt == "Distribution")
window.alert("distribution");
</SCRIPT>
<div style="float:right">
<select name = "ddPortfolio">
<option value="volvo">-- Select Option --</option>
<option value="saab">Training</option>
<option value="mercedes">Internal</option>
<option value="audi">External</option>
</select>
</div>
You have some syntax errors. Also there is no Distribution value in your options. I think you want this:
html
<div style="float:right">
<select name = "ddPortfolio" onchange="test(this);">
<option value="volvo">-- Select Option --</option>
<option value="saab">Training</option>
<option value="mercedes">Internal</option>
<option value="audi">External</option>
</select>
</div>
js
function test(obj){
var txt = obj.value;
if(txt == "audi"){
window.alert("audi");
}
}
fiddle
HTML
<select onchange="getval(this);">
<option value="1">One</option>
<option value="2">Two</option>
</select>
SCRIPT
<script type="text/javascript">
function getval(sel) {
alert(sel.value) ;
}
</script>
Simple Drop down box working using javascript.
You checked If(txt == "Distribution") but that was not one of the options in your select in the code you provided. also it's the onchange triegger you need
You also need to add an id to the select so you can reference it for example
HTML snippet
<select name = "ddPortfolio" id = "ddPortfolio">
Javscript
var MyColumn = document.getElementById("ddPortfolio");
MyColumn.onchange = function(){if (MyColumn.value == "audi") {alert('hi');}};
http://jsfiddle.net/64Z7H/
I'm working on using the select tag to know which attribute to assign a value.
<select>
<option value="selStr">STR</option>
<option value="selDex">DEX</option>
<option value="selInt">INT</option>
<option value="selWis">WIS</option>
<option value="selCon">CON</option>
<option value="selCha">CHA</option>
</select>
How do I send the information to JavaScript to know which has been selected?
I've gotten it working with the help of Zero298, but thanks to everyone who is putting different ways to do this!
Start by giving your select an Id
<select id="mySelect">
<option value="selStr">STR</option>
<option value="selDex">DEX</option>
<option value="selInt">INT</option>
<option value="selWis">WIS</option>
<option value="selCon">CON</option>
<option value="selCha">CHA</option>
</select>
Then in your script do the following:
var e = document.getElementById("mySelect");
var selectedValue = e.options[e.selectedIndex].value;
selectedValue will be the string that is in the value attribute of the selected option.
<select onchange="alert(this.options[this.selectedIndex].value)" >
JSFIDDLE
I have a select element of the form:
<select id="test" name="test">
<option value="blah">Test1</option>
<option value="blah">Test2</option>
.
<option value="blah">Testn</option>
</select>
I want to display the text "Select a test" as default.
I know the way of doing this is to set a new option
<option selected="selected">Select a test</option>
at the top. But I'm looking for some other way where I don't have to use the tag.
Is it possible through javascript (jQuery will also do)?
I've done this with a dummy entry in the past...
HTML
<select id="test" name="test">
<option value="0">Select an option...</option>
<option value="blah">Test1</option>
<option value="blah">Test2</option>
<option value="blah">Test3</option>
<option value="blah">Test4</option>
<option value="blah">Test5</option>
</select>
Javascript
$("#test").on("change", function() {
if ($(this).val() != "0") {
$("option[value=0]", this).remove();
}
});
Here's a working example on jsFiddle...
http://jsfiddle.net/97Bqr/
The "Select an option" option is removed as soon as you select something else.
Here's a plain js solution:
var selecttest = document.querySelector('#test');
selecttest.insertBefore(new Option('select a test'),selecttest.firstChild);
selecttest.selectedIndex = 0;
I have spent about an hour or two trying to find out how to use JavaScript to create a text field when a certain value is selected from a drop down list.
Here is the code for the drop down menu if that's of any help. I'd have attempted to write the code to do this myself, but I am still very unfamiliar with how to write JavaScript code
<select name="claim">
<option value="">Select a Claim</option>
<option value="Insurance">Insurance</option> // this option I want when selected to create a text field
<option value="Warranty">Warranty</option>
</select>
try this hope it helps
<div id="area">
<select id="claim" name="claim">
<option value="">Select a Claim</option>
<option value="Insurance">Insurance</option>
<option value="Warranty">Warranty</option>
</select>
</div>
and script
$(document).ready(function(){
$("#claim").change(function(){
$("#area").find(".field").remove();
//or
$('#area').remove('.field');
if( $(this).val()=="Insurance")
{
$("#area").append("<input class='field' type='text' />");
}
});
});
example http://jsfiddle.net/cqjJy/