I have a SELECT which looks like this.
<select id="mySelect"><option value="">Please select</option></select>
At a certain point, my javascript sets the OPTION as follows:
var elSel = document.getElementById('mySelect');
elSel.options[0].value = myValue;
elSel.options[0].text = myText;
The problem is that you have to click the select for it to show myText. How do I make it so that myText (with myValue) shows as soon as I run that javascript?
Add elSel.selectedIndex = 0; to the end of your script. Use elSel.options.length-1 if you're going to ever have more than 1 item and you want to select the last item.
<html>
<head>
<script language="javascript">
function addItem() {
var elSel = document.getElementById('test');
elSel.options[0].value = '1';
elSel.options[0].text = 'new value';
elSel.selectedIndex = 0;
}
</script>
</head>
<body>
<form>
<select id="test"><option value="1">- SELECT AN ITEM -</option></select>
<input type="button" value="Add Item" onclick="addItem();" />
</form>
</body>
</html>
Load the script with onLoad attribute of the body tag? e.g.
<body onload="initSelect()">
Or simply put the script after the select tag:
<select>...</select>
<script>//code to generate the options</script>
Try using DOM manipulation:
<select id="mySelect">
<option value="">Please select</option>
</select>
<script>
var elSel = document.getElementById('mySelect');
var opt = {};
opt = document.createElement('option');
opt.value = '1';
opt.text = 'a';
elSel.appendChild(opt);
opt = document.createElement('option');
opt.value = '2';
opt.text = 'b';
opt.selected = true; /* Here is where we update the select element */
elSel.appendChild(opt);
opt = document.createElement('option');
opt.value = '3';
opt.text = 'c';
elSel.appendChild(opt);
</script>
Test it here:
http://dl.dropbox.com/u/186012/demos/stackoverflow/select/index.html
The problem was the jQuery plugin I was using (Uniform), I didn't realize that I had to run $.uniform.update()
http://pixelmatrixdesign.com/uniform/
Related
I am trying to get the value of the dynamic dropdown that is selected by the user (not pre-determined). I'm pretty sure I can't use (tried as well) document.getElementById("selectSubject").value; since it has conflicting ID. I cannot use document.getElementByClass since I will be using it to add style by CSS.
<script> //to generate the dynamic dropdown that is working
var select = document.getElementById("selectSubject");
if (arrayEmail[i] == email){
var opt = arraySubject[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
<script>
<select id="selectSubject"> //where the dynamic dropdown is show
<option>Choose assigned subject</option>
</select>
//additional info that may contribute to the problem
<form>
<input type="hidden" name ="subjectFolder" id="uploadFile">
<input type="file" name="imageFile">
<input type="button" value="Upload File" onclick="google.script.run.withSuccessHandler().upload(this.parentNode)">
</form>
Additional info is that I am planning to get the value of the dropdown to be used as parameter in <input type="hidden" name ="subjectFolder" id="uploadFile"> by using document.getElementById('uploadFile').value = "value of selected option in dropdown"
Edit Update I have tried this as well but didn't work
var subjects = document.getElementsByTagName("select").getElementById('selectSubject').value;
document.getElementById('uploadFile').value = subjects;
** Edit** Update I have tried ravishankar chavare's method by doing this but still doesn't work.
var e = document.getElementById("selectSubject");
var selected_value = e.options[e.selectedIndex].value;
document.getElementById('uploadFile').value = selected_value;
** Edit** Update
var e = document.getElementById("selectSubject");
var selected_value = e.options[e.selectedIndex].value;
document.getElementById('uploadFile').value = selected_value;
console.log(selected_value);
Console only prints "Choose assigned subject" since it is the default selected but when I remove <option> Choose assigned subject </option> the default selected is one of the array values of the javascript based from the dropdown but console cannot print it's value.
var select = document.getElementById("selectSubject");
var opt = 'youreemailvalue';
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
function SetSelectedValue() {
var e = document.getElementById("selectSubject");
var selected_value = e.options[e.selectedIndex].value;
document.getElementById('uploadFile').value = selected_value;
alert('value set to uploadfile')
}
<select id="selectSubject" onchange="SetSelectedValue();">
<option>Choose assigned subject</option>
</select>
<form>
<input type="hidden" name ="subjectFolder" id="uploadFile">
<input type="file" name="imageFile">
<input type="button" value="Upload File" onclick="google.script.run.withSuccessHandler().upload(this.parentNode)">
</form>
Following code is working for me
var e = document.getElementById("selectSubject");
var selected_value= e.options[e.selectedIndex].value;
selected_value get the value which is selected by the user
Working Jsfiddle Example Here
https://jsfiddle.net/0yfdc51g/
You can use document.querySelector. Use document.querySelectorAll if you want to select all select#selectSubject
console.log( document.querySelector( 'select[id=selectSubject]' ) );
console.log( document.querySelectorAll( 'select[id=selectSubject]' ) );
<div id="selectSubject"></div>
<select id="selectSubject" class="select"></select>
<select id="selectSubject"></select>
I am adding dropdowns dynamically by code it is rendered in browser like
<select id="contact-type1"></select>
<select id="contact-type2"></select>
...
Now I am trying the below code for dynamically selecting nth number of dropdown in order to fill option values in them.
function fillContactTypes()
{
var types = ["Phone","Whatapp","Facebook","Web","Fax"];
var select = document.getElementById('contact-type[*n]');
for(var i = 0; i < types.length; i++)
{
var option = document.createElement('option');
option.innerHTML = types[i];
option.value = types[i];
select.appendChild(option);
}
}
Please help me in the line "var select = document.getElementById('contact-type[*n]');
".
I have just added common class to all dropdowns and using jquery you can dynamically bind all dropdown as shown below.
var types = ["Phone","Whatapp","Facebook","Web","Fax"];
$(document).ready(function(){
fillContactTypes()
});
function fillContactTypes(){
var myselect = $('<select>');
$.each(types, function(index, key) {
myselect.append( $('<option></option>').val(key).html(key) );
});
$('.contact-type').append(myselect.html());
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>
<select id="contact-type1" class="contact-type">
</select>
<select id="contact-type2" class="contact-type">
</select>
<select id="contact-type3" class="contact-type">
</select>
<select id="contact-type4" class="contact-type">
</select>
I know change the value of an INPUT TEXT.
<script>
document.write('<input type="text" id="1" value="Hello">');
document.getElementById('1').value = ("Good bye");
</script>
How can I add values to an empty SELECT with this method?
<script>
document.write('<select><option id="2"></option><option id="3"></option></select>');
document.getElementById ........;
</script>
I want my empty SELECT becomes a SELECT with two options: "Hello" and "Good bye."
Why not write:
document.write('<select><option id="2">Hello</option><option id="3">Good bye</option></select>');
Or if you want to add one programmatically:
document.write('<select id="s"></select>');
var s = document.getElementById("s");
var option = document.createElement("option");
option.text = "Hello";
s.add(option);
var option = document.createElement("option");
option.text = "Good bye";
s.add(option);
this is very simple ....
<script>
var add = function(){
var sel = document.getElementById("sel");
var in1 = document.getElementById("in").value;
var opt = document.createElement("option");
opt.innerHTML = in1;
sel.appendChild(opt);
}
</script>
<select id="sel">
</select>
<input id="in" type="text" />
<button onclick="add();">add</button>
here is the demo: CLICK
another exanple how to do this thing by using innerHTML is here: jsfiddle
this is done by making a element as you know option by using javascript and then it is appended in the element select and the option text is the value of input box... and hope you are understood.
You can do it easily with jQuery
$(document).ready(function() {
$("select").append('<option id="3" value="somevalue">Some text</option>"');
});
I have a problem with Javascript. I'm trying to set a background image for an option in a multi select box. This works with Firefox 3.6.14, but not with Internet Explorer 8. I have made a short code sample to show you the problem. Does anyone have a solution for my problem?
<html>
<head>
<script language="javascript" type="text/javascript">
function changeIssueTypes(){
var testSelect = document.getElementById("testSelect");
var comboBoxTest = document.getElementById("comboBoxTest");
testSelect.options.length = 0;
if(comboBoxTest.value == 'optionTest1')
{
testSelect.options[0] = new Option();
testSelect.options[0].value = 'testOption1';
testSelect.options[0].innerHTML = 'Test option 1';
testSelect.options[0].style.backgroundImage = 'url(http://www.multimove.nl/images/icons/small/icon_document.gif)';
testSelect.options[0].style.backgroundRepeat = 'no-repeat';
}
if(comboBoxTest.value == 'optionTest2')
{
testSelect.options[0] = new Option();
testSelect.options[0].value = 'testOption1';
testSelect.options[0].innerHTML = 'Test option 1';
testSelect.options[0].style.backgroundImage = 'url(http://www.middelburg.nl/static/middelburgpresentation/images/icons/icon_pdf.gif)';
testSelect.options[0].style.backgroundRepeat = 'no-repeat';
}
}
</script>
</head>
<body>
<form>
<select id="comboBoxTest" onchange="changeIssueTypes()">
<option value="optionTest1" >Option test 1</option>
<option value="optionTest2" >Option test 2</option>
</select>
<br/>
<select multiple id="testSelect">
<option value="initialOption">Test initial option</option>
</select>
</form>
</body>
</html>
First of all: Try to set appropriate CSS properties "by hand", directly in CSS; I'm afraid IE8 doesn't allow change the background-image property on multi-line selectbox.
If so, try to use standard DOM methods like appendChild() and createElement() to proper create DOM element:
var opt = document.createElement("option");
opt.value = "value";
opt.innerHTML = "blah blah";
opt.style.backgroundImage = "...";
testSelect.appendChild(opt);
I want to make the options of < select > show or hide by program(JS),is it possible?
It is just like the interesting tags in the front page of StackOverFlow, when you type in some words, the drop list will expand and give you suggestions.
ps.I know StackOverFlow didn't use select in this case, anyway just take it as an example.
You add or remove items from the options collection of the select.
Here is an example that removes one item and adds another:
<html>
<head>
<title></title>
<script type="text/javascript">
function init() {
// get a reference to the element
var sel = document.getElementById('sel');
// remove an option
sel.options[2] = null;
// create a new option and add to the select
var opt = document.createElement('option');
opt.value = '5';
opt.text = 'five';
sel.options.add(opt);
}
</script>
</head>
<body onload="init();">
<form>
<select id="sel">
<option value="0">zero</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</form>
</body>
</html>
function getCatListdef(sel)
{
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = 'data.php?cat_code='+sel;
ajax[index].onCompletion = function(){ createCities(index) };
ajax[index].runAJAX();
}