I'm working on a test/quiz and I can't solve a problem.
I like to grab the selected value from a option and print it to the result p.
<div class="add">
<div class="add__container">
<select class="add__type">
<option value="0" id="a01" selected>No</option>
<option value="1" id="a02">Ocassionally</option>
<option value="2" id="a03">Yes</option>
</select>
</div>
</div>
<button class="btn" onclick="myValue()">Results</button>
<p id="result">... </p>
And here is my Javascript code where I'm stucked:
function myValue(){
var e = document.getElementById("s01");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;
document.getElementById('result').innerHTML = e;
};
try this code. I think this code work like you requirement.
function myValue(){
var select = document.getElementsByClassName("add__type")[0].value;
document.getElementById('result').innerHTML = select;
};
<div class="add">
<div class="add__container">
<select class="add__type">
<option value="0" id="a01" selected>No</option>
<option value="1" id="a02">Ocassionally</option>
<option value="2" id="a03">Yes</option>
</select>
</div>
</div>
<button class="btn" onclick="myValue()">Results</button>
<p id="result">... </p>
something more..
I think you want to put the actual text of the selected option in the innerHtml instead of the option DOM element:
document.getElementById('result').innerHTML = text;
Maybe you want this? I added the id "s01" on select.
<div class="add">
<div class="add__container">
<select id="s01" class="add__type">
<option value="0" id="a01" selected>No</option>
<option value="1" id="a02">Ocassionally</option>
<option value="2" id="a03">Yes</option>
</select>
</div>
</div>
<button class="btn" onclick="myValue()">Results</button>
<p id="result">... </p>
<script>
function myValue() {
var e = document.getElementById("s01");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;
document.getElementById('result').innerHTML = text;
};
</script>
// Unimportant stuff
const $ = document;
$.get = $.getElementById;
$.get('theOptions').addEventListener('change', function(event) {
// Get the value from the select-element
$.get('out').innerHTML = 'You selected ' + event.target.value; // Or $.get('theOptions').value
});
<select id="theOptions">
<option value="o1">Option 1</option>
<option value="o2">Option 2</option>
<option value="o3">Option 3</option>
</select>
<span id="out">Nothing selected</span>
Related
Here is my Fiddle
<input type="number" id="test" onkeydown="javascript:return event.keyCode==69? false:true" name="form_select" class="text" onchange="showDiv()">
<select id="hidden_div1" style="display:none;" name="form_select">
<option value="0">No</option>
<option value ="1">Yes</option>
</select>
<div id="allcontent1"></div>
<script>
function showDiv(){
allselect="";
getSelectValue = parseInt(document.getElementById("test").value);
if(getSelectValue > 0){
for (let i=0;i<getSelectValue;i++){
allselect+=document.getElementById("hidden_div1").style.display="block";}
}else{
document.getElementById("hidden_div1").style.display="none";
}
document.getElementById("allcontent1").innerHtml = allselect;
}
</script>
I wanted to iterate my select elements, using javascript only
Using Javascript, I am dynamically generating dropdowns list under dvContainer. I want to get selected values of all the select elements under that container. The following is HTML code generated from javascript:
<div id="dvContainer">
<div>
<select id="QType_id2">
<option value="1">MCQs</option>
<option value="2">Short Questions</option>
<option value="3">Long Questions</option>
</select>
<input type="button" value="Remove">
</div>
<div>
<select id="QType_id">
<option value="1">MCQs</option>
<option value="2">Short Questions</option>
<option value="3">Long Questions</option>
</select>
<input type="button" value="Remove">
</div>
<div>
<select id="QType_id">
<option value="1">MCQs</option>
<option value="2">Short Questions</option>
<option value="3">Long Questions</option>
</select>
<input type="button" value="Remove">
</div>
</div>
This Java Script is used to add dropdowns in dvContainer:
<script type="text/javascript">
function AddDropDownList() {
//Build an array containing Customer records.
var customers;
$.getJSON(href="URL GOES HERE",function(customers){
//Create a DropDownList element.
var ddlCustomers = $("<select />");
ddlCustomers.attr('id',"QType_id")
//Add the Options to the DropDownList.
$(customers).each(function () {
var option = $("<option />");
//Set Customer type in Text part.
option.html(this.type);
//Set id in Value part.
option.val(this.id);
//Add the Option element to DropDownList.
ddlCustomers.append(option);
});
//Reference the container DIV.
var dvContainer = $("#dvContainer")
//Add the DropDownList to DIV.
var div = $("<div />");
div.append(ddlCustomers);
//Create a Remove Button.
var btnRemove = $("<input type = 'button' value = 'Remove' />");
btnRemove.click(function () {
$(this).parent().remove();
});
//Add the Remove Buttton to DIV.
div.append(btnRemove);
//Add the DIV to the container DIV.
dvContainer.append(div);
});
};
</script>
Using AJAX/jQuery, I want to build a function, which gives selected values of all the dropdowns.
Just for the note, it is not good practice to add multiple elements with same id. Suggested is to replace ddlCustomers.attr('id',"QType_id") with ddlCustomers.attr('name',"QType_id"). Added below is code snippet to get all row data.
function getAllRowsData() {
var alldata = $('#dvContainer>div').map(function() {
var $this = $(this),
data = {};
data['QType_id'] = $this.find('[name="QType_id"]').val();
return data;
}).toArray();
$("#alldataop").text(JSON.stringify(alldata));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvContainer">
<div>
<select name="QType_id">
<option value="1">MCQs</option>
<option value="2">Short Questions</option>
<option value="3">Long Questions</option>
</select>
<input type="button" value="Remove">
</div>
<div>
<select name="QType_id">
<option value="1">MCQs</option>
<option value="2">Short Questions</option>
<option value="3">Long Questions</option>
</select>
<input type="button" value="Remove">
</div>
<div>
<select name="QType_id">
<option value="1">MCQs</option>
<option value="2">Short Questions</option>
<option value="3">Long Questions</option>
</select>
<input type="button" value="Remove">
</div>
</div>
<input type="button" onclick="getAllRowsData()" value="Get Data">
<div id="alldataop"></div>
I have select tag below:
<select name="selID" id="selID" data-mini="true"">
<option value="1" selected="selected">Tithes</option>
<option value="2">Offering</option>
<option value="3">Designated</option>
<option class="selOptAddMore" value="0">Add More...</option>
</select>
I want to change value when one of the options is selected except for "Add More..."
Sorry I'm a newbie. Thanks in advance.
You can try this:
The HTML:
<body>
Result: <p id="result"></p>
<select name="selID" id="selID" data-mini="true" onchange="test()">
<option value="1" selected="selected">Tithes</option>
<option value="2">Offering</option>
<option value="3">Designated</option>
<option class="selOptAddMore" value="0">Add More...</option>
</select>
<script src="test.js"></script>
</body>
test.js:
function test() {
let listVal = document.getElementById("selID").value;
if (listVal != "0") {
document.getElementById("result").innerHTML = listVal;
}
else {
listVal = 1; // this is value for "Tithes"
document.getElementById("selID").value = listVal;
document.getElementById("result").innerHTML = listVal;
}
}
I've been trying to fetch user input from a simple drop-down list to fill it into a <p> tag but can't seem to get it done.
The following is my javascript:
<script>
function changeText() {
var textDDL = document.getElementById("DDL1");
var text = textDDL.options[textDDL.selectedIndex].value;
var test = document.getElementById("test");
test.innerHTML = text;
}
</script>
The following is my HTML code:
<p class="first">
<label for="first">From</label>
<input list="countriesDL" name="country" class="form-control" type="text" id="DDL1">
<datalist id="countriesDL">
<option value="Afghanistan" class="form-control"></option>
<option value="Albania"></option>
<option value="Algeria"></option>
<option value="Aland Islands"></option>
<option value="American Samoa"></option>
<option value="Anguilla"></option>
<option value="Andorra"></option>
<option value="Angola"></option>
<option value="Antilles - Netherlands"></option>
<option value="Antigua and Barbuda"></option>
<option value="Antarctica"></option>
<option value="Argentina"></option>
<option value="Armenia"></option>
<option value="Australia"></option>
<option value="Taiwan"></option>
</datalist>
</p>
<button id="info2Btn" type="button" class="btn btn-warning leggo" style="color:black;" onClick="changeText()">Let's Go</button>
The codes would be triggered by a button press. I've tried reloading the page upon button press to see if it applies the user input, I've tried calling the function upon clicking the button. Can't seem to see what's wrong with it.
[UPDATED] Is this what you are trying?
function changeText() {
var textDDL = document.getElementById("DDL1");
var text = textDDL.value;
var test = document.getElementById("text");
test.innerHTML = text;
}
<p class="first">
<label for="first">From</label>
<input list="countriesDL" name="country" class="form-control" type="text" id="DDL1">
<datalist id="countriesDL">
<option value="Afghanistan" class="form-control"></option>
<option value="Albania"></option>
<option value="Algeria"></option>
<option value="Aland Islands"></option>
<option value="American Samoa"></option>
<option value="Anguilla"></option>
<option value="Andorra"></option>
<option value="Angola"></option>
<option value="Antilles - Netherlands"></option>
<option value="Antigua and Barbuda"></option>
<option value="Antarctica"></option>
<option value="Argentina"></option>
<option value="Armenia"></option>
<option value="Australia"></option>
<option value="Taiwan"></option>
</datalist>
</p>
<button id="info2Btn" type="button" class="btn btn-warning leggo" style="color:black;" onClick="changeText()">Let's Go</button>
<p id="text"></p>
Try
function changeText() {
document.getElementById("test").innerHTML = document.getElementById("DDL1").value;
}
I have this HTML code:
<select id="ITAAServerList" name="ITAAServerList" style="visibility:visible">
<option ServerName="SERVER01" IPAddress="192.168.46.1" StartPageName="SERVER01_Start.html">SERVER01</option>
<option ServerName="SERVER02" IPAddress="192.168.46.2" StartPageName="SERVER02_Start.html">SERVER02</option>
<option ServerName="SERVER03" IPAddress="192.168.46.3" StartPageName="SERVER03_Start.html">SERVER02</option>
</select>
<button type="submit" name="oNext" id="oNext" onclick ="OnClickNext()" class="item cursor-pointer login-button">LOGIN</button>
...
<script type="text/javascript" src="onclicknext.js"></script>
And this JS code:
function OnClickNext() {
var oITAAServer = document.getElementById('ITAAServerList').options[this.selectedIndex].getAttribute('StartPageName');
alert(oITAAServer);
};
I can't get StartPageName attribute from the dropdown menu. Help?
You're almost there - you just need to do .selectedIndex against the <select> element instead of against this.
function OnClickNext() {
var selectElement = document.getElementById('ITAAServerList');
var selectedOption = selectElement.options[ selectElement.selectedIndex ]; //not this.selectedIndex
var oITAAServer = selectedOption.getAttribute('StartPageName');
alert(oITAAServer);
};
<select id="ITAAServerList" name="ITAAServerList" style="visibility:visible">
<option ServerName="SERVER01" IPAddress="192.168.46.1" StartPageName="SERVER01_Start.html">SERVER01</option>
<option ServerName="SERVER02" IPAddress="192.168.46.2" StartPageName="SERVER02_Start.html">SERVER02</option>
<option ServerName="SERVER03" IPAddress="192.168.46.3" StartPageName="SERVER03_Start.html">SERVER03</option>
</select>
<button type="submit" name="oNext" id="oNext" onclick ="OnClickNext()" class="item cursor-pointer login-button">LOGIN</button>