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>"');
});
Related
I have one main dropdown, when one of the option is selected in the dropdown, in the next text field another dropdown has to come with different values, and when other option is selected in the main dropdown in the text has to appear in the same text field. So basically my question is, how to add both text and dropdwon in the same input field when the option is selected in the dropdown.
I have tried to do the one part of the problem i.e , when first two option is selected the value is appearing in input field , but I'm not able to make the dropdown appear in the input field when third option is selected.
Can anyone help me on this problem!
<html>
<body>
<label> Assets:</label>
<select id="name" onchange="func()">
<option value=""></option>
<option value="year">Calendar</option>
<option value="the current month">Month</option>
<option id="no-of-days">Days</option>
</select><br><br>
<label>Days:</label>
<input type="text" id="days">
<script>
function func() {
var dropdown = document.getElementById("name");
var selection = dropdown.value;
console.log(selection);
var TextBox = document.getElementById("days");
TextBox.value = selection;
document.getElementById('no-of-days').onclick = function() {
var values = ["1", "2", "3", "4"];
var select = document.createElement("select");
select.name = "date";
select.id = "date"
for (const val of values) {
var option = document.createElement("option");
option.value = val;
option.text = val.charAt(0).toUpperCase() + val.slice(1);
select.appendChild(option);
}
var label = document.createElement("label");
label.innerHTML = "Choose your date: "
label.htmlFor = "date";
document.getElementById("container").appendChild(label).appendChild(select);
}
}
</script>
</body>
</html>
You are not selecting the days dropdown as you should be. There is no value for days option (third option).
Firstly we need to set the value of third option
Check if its selected select onchange function
We can the check on change if the value of selected option is no-of-days then we can append another dropdown OR else we will not show anything.
Run snippet below to see it working.
function func() {
var dropdown = document.getElementById("name");
var selection = dropdown.value;
var TextBox = document.getElementById("days");
var appendNewSelect = document.getElementById("container")
TextBox.value = selection;
//If days (option) is selected
if (selection == 'no-of-days') {
var values = ["1", "2", "3", "4"];
//Create Select
var select = document.createElement("select");
select.name = "date";
select.id = "date"
//Select option
for (const val of values) {
var option = document.createElement("option");
option.value = val;
option.text = val.charAt(0).toUpperCase() + val.slice(1);
select.appendChild(option);
}
//Label
var label = document.createElement("label");
label.innerHTML = "Choose your date: "
label.htmlFor = "date";
appendNewSelect.appendChild(label).appendChild(select);
} else {
appendNewSelect.innerHTML = ''
}
}
<html>
<body>
<label> Assets:</label>
<select id="name" onchange="func()">
<option value=""></option>
<option value="year">Calendar</option>
<option value="the current month">Month</option>
<option value="no-of-days">Days</option>
</select><br><br>
<label>Days:</label>
<input type="text" id="days">
<br>
<br>
<div id="container">
</div>
</body>
</html>
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>
im trying to get multiple options on a multiple select and add them in a normal select but when i click on a button to add, for exemple, i select on two options and add them they change to one option on the normal select
JSFIDDLE EXAMPLE
JavaScript CODE
function addProf() {
// get reference to select element
var sel = document.getElementById('ProfAdd');
var opt = document.createElement('option'); // create new option element
// create text node to add to option element (opt)
if ($(this).find('option[value="' + sel + '"]').length == 0) {
opt.appendChild(document.createTextNode(document.getElementById('selProf').value));
opt.value = 'option val'; // set value property of opt
sel.appendChild(opt); // add opt to end of select box (sel)
$("#selProf").find('option:selected').remove();
}
}
function remProf() {
// get reference to select element
var sel = document.getElementById('selProf');
var opt = document.createElement('option'); // create new option element
// create text node to add to option element (opt)
if ($(this).find('option[value="' + sel + '"]').length == 0) {
opt.appendChild(document.createTextNode(document.getElementById('ProfAdd').value));
opt.value = $("#ProfAdd :selected").text(); // set value property of opt
opt.text = $("#ProfAdd :selected").text();
sel.appendChild(opt); // add opt to end of select box (sel)
$("#ProfAdd").find('option:selected').remove();
}
}
HTML CODE
<div class="form-group">
<label for="InputProf">Adicionar professores à turma</label>
<select id="selProf" class="form-control" required>
<option disabled selected>Professor</option>
<option value="2">2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<input type="button" id="button6" class="myButton2" onclick="addProf()" value="Adicionar Professor">
</br>
<div class="form-group">
<label for="InputTurma">Professores adicionados</label>
<select multiple class="form-control" id="ProfAdd">
</select>
</div>
<input type="button" id="button7" class="myButton2" onclick="remProf()" value="Retirar Professor">
If you have two options selected, $('select :selected').text() will return a single string concatenated selected text's. See fiddle.
Because :selected is returning multiple elements, you'll want to loop through them, and do something with each. One way of doing this is using jQuery.each.
You'll need to create a new option for each selected one - I've moved a little
$("#ProfAdd :selected").each(function (idx, selOpt) {
var opt = document.createElement('option'); // create new option element
opt.appendChild(document.createTextNode(document.getElementById('ProfAdd').value));
opt.value = $(selOpt).text(); // set value property of opt
opt.text = $(selOpt).text();
sel.appendChild(opt); // add opt to end of select box (sel)
$(selOpt).remove();
});
http://jsfiddle.net/daveSalomon/0b0obyra/5/
The code still isn't ideal - you're mixing document.getElementById (vanilla JS) with $('#id') (jQuery). Pick one and stick to it.
Here's a much cleaner solution...
var $multiSel = $('#ProfAdd');
var $singleSel = $('#selProf');
$('#button6').click(function(){
var $opts = $singleSel.find('option:selected');
$multiSel.append($opts).val('');
});
$('#button7').click(function(){
var $opts = $multiSel.find('option:selected');
$singleSel.append($opts).val('');
});
http://jsfiddle.net/daveSalomon/0b0obyra/8/
I'm trying to fill a select list with the values entered in an input text box when the user clicks on a button. For eg:
HTML:
<form>
<h2>Add EVENT/MARKET/SELECTION ID </h2>
<select id="id_type">
<option value="sEVENT">Event</option>
<option value="sEVMKT">Market</option>
<option value="sSELCN">Selection</option>
</select>
<input id="entered_id" type="number"/>
<button id="add_id" onclick="populateList()">Add</button>
</form>
<form>
<h2>Entered IDs</h2>
<select id="list_id" size="10" multiple="true"></select>
</form>
JS:
function populateList() {
var events_id = document.getElementById('entered_id').value;
/*I want this events_id to be entered to the select list "list_id"*/
}
I tried $("#list_id").append(events_id) but that didn't work.
Any help is appreciated.
Thanks
since its <select> you need to append <option> tag, as:
$("#list_id").append("<option value='"+events_id+"'>"+events_id+"</option>");
Try FIDDLE
$("#add_id").click(function () {
var value = $("#entered_id").val();
$("#list_id").append("<option value =" + value + " >" + value + "</option>");
});
using JavaScript
var option = document.createElement("option");
option.text = document.getElementById('entered_id').value;
option.value = document.getElementById('entered_id').value;
var select = document.getElementById("list_id");
select.appendChild(option);
Doing everything the jQuery way you can bind a click handler to the button instead of the inline method.
$('#add_id').click(function() {
$('<option/>', { text: this.value }).appendTo('#list_id');
});
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/