I'm trying to retrieve a value from a select box in my HTML table. How can I select the selected value?
What I've tried so far:
this.cells[14].innerHTML;
this.cells[14].children[0].innerhtml;
this.cells[14].children[0].innerText;
The last one .innerText returns all the items in my select box......
var table2 = document.getElementById('table_items_program');
for (var i2 = 1; i2 < table2.rows.length; i2++) {
table2.rows[i2].onclick = function () {
document.getElementById("id").value = this.cells[0].innerHTML;
document.getElementById("select").value = this.cells[14].children[0].innerText;
}
}
<td><select class="selectpicker" multiple>
<?php while ($row9 = mysqli_fetch_assoc($result9)):; ?>
<option value="<?php echo $row9['id']; ?>"><?php echo $row9['id'];?>
</option>
<?php endwhile; ?>
</select></td>
<input style="display: inline" id="id" name="id">
<input style="display: inline" id="select" name="select">
The selected value from my selection box in my HTML table
How can I select the selected value?
You can get the selected index with the method HTMLSelect​Element​.selected​Index
But if I understand your trouble. You try to get the current values of your select. So you need to get the value of your selected options.
You can do it like:
document.getElementById('mySelect').onchange = function() {
let options = this && this.options;
let selectedValues = []
for (var i = options.length; i--;) {
let opt = options[i];
if (opt.selected) {
selectedValues.push(opt.value || opt.text);
}
}
console.log(selectedValues)
}
<select id="mySelect" multiple>
<option value="a"> a </option>
<option value="b"> b </option>
<option value="c"> c </option>
</select>
Implementation into your code example
for (var i2 = 1; i2 < table2.rows.length; i2++) {
table2.rows[i2].onclick = function() {
document.getElementById("id").value = this.cells[0].innerHTML;
var options = this && this.cells[14].children[0].options;
var selectedValues = []
for (var i = options.length; i--;) {
var opt = options[i];
if (opt.selected) {
selectedValues.push(opt.value || opt.text);
}
}
document.getElementById("select").value = JSON.stringify(selectedValues);
}
}
so simple...
ShowSelected.onclick = function()
{
console.clear()
document.querySelectorAll('.selectpicker option:checked').forEach(opt=>console.log(opt.value))
}
.selectpicker {
vertical-align: text-top;
}
choose one or more :
<select class="selectpicker" multiple size=6 >
<option value="a"> A element</option>
<option value="b"> B element</option>
<option value="c"> C element</option>
<option value="d"> D element</option>
<option value="e"> E element</option>
<option value="f"> F element</option>
</select>
<button id="ShowSelected"> Show Selected</button>
Welcome to Stack Overflow!
So, your <select> has the class selectpicker. We can use this to select your <select>!
Try the following to get your value:
document.querySelector(".selectpicker").value;
Or, if you have multiple <select>'s, you can use
[...document.querySelectorAll(".selectpicker")].forEach(opt => {
console.log(opt.value)
});
Hope that clears things up a little.
Related
I have this dynamic HTML / JavaScript form that is working great, but I found that when I click submit it is bringing over the value of the option as its index and not as the text within the option.
I have tried altering the JavaScript code but can not seem to figure out how to resolve this.
HTML
<!-- Category -->
<label for="type">Category<span class="required-input"> *</span></label>
<select id="type" name="type" onchange="ChangeTypeList()">
<option value="">--Select--</option>
<option value="Order Inquiry">Order Inquiry</option>
<option value="Product Inquiry">Product Inquiry</option>
</select>
<!-- Sub Category -->
<label for="reason">Sub Category</label>
<select id="reason" name="reason"></select>
JavaScript
var reasons = {};
reasons['Order Inquiry'] = ['Order Status','Order Issue', 'X'];
reasons['Product Inquiry'] = ['Product Weight', 'Product Quality'];
function ChangeTypeList() {
var typeList = document.getElementById("type");
var reasonsList = document.getElementById("reason");
var reasonsType = typeList.options[typeList.selectedIndex].value;
while (reasonsList.options.length) {
reasonsList.remove(0);
}
var decisions = reasons[reasonsType];
if (decisions) {
var i;
for (i = 0; i < decisions.length; i++) {
var decision = new Option(decisions[i], i);
reasonsList.options.add(decision);
// console.log('decision', decision);
}
}
}
When I select the first Category option 'Order Inquiry' and console.log:
console.log('decision', decision);
I see the following in the Console for the Sub Categories:
<option value="0">Order Status</option>
<option value="1">Order Issue</option>
<option value="2">X</option>
Ideally I want to see this is the Console for the Sub Categories:
<option value="Order Status">Order Status</option>
<option value="Order Issue">Order Issue</option>
<option value="X">X</option>
You need to pass decisions[i] as second parameter in Option.
Syntax:new Option(text, value, defaultSelected, selected); More details Option
var reasons = {};
reasons['Order Inquiry'] = ['Order Status','Order Issue', 'X'];
reasons['Product Inquiry'] = ['Product Weight', 'Product Quality'];
function ChangeTypeList() {
var typeList = document.getElementById("type");
var reasonsList = document.getElementById("reason");
var reasonsType = typeList.options[typeList.selectedIndex].value;
while (reasonsList.options.length) {
reasonsList.remove(0);
}
var reason = document.getElementById('reason');
var decisions = reasons[reasonsType];
if (decisions) {
var i;
for (i = 0; i < decisions.length; i++) {
//This line is changed
var decision = new Option(decisions[i], decisions[i]);
reasonsList.options.add(decision);
console.log('decision', decision);
}
}
}
<label for="type">Category<span class="required-input"> *</span></label>
<select id="type" name="type" onchange="ChangeTypeList()">
<option value="">--Select--</option>
<option value="Order Inquiry">Order Inquiry</option>
<option value="Product Inquiry">Product Inquiry</option>
</select>
<!-- Sub Category -->
<label for="reason">Sub Category</label>
<select id="reason" name="reason"></select>
option HTML element has a value and text attribute.
var options = document.getElementById("dropdown").children;
for (var i = 0; i < options.length; i++) {
options[i].value = options[i].text;
}
<select id="dropdown">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
</select>
I have a dropdown menu with products similiar like this
<select class="fruits" >
<option value="1" >Oranges</option>
<option value="2" >Bananes</option>
<option value="3" >Apples</option>
</select>
I need to remove options by its value. How to do that ?
Pure JavaScript please.
EDIT : I know that I need to use element.removeChild(child) method. But how to reference child by its value. Thats my point.
EDIT 2 : I use the script of zdrohn below and it works. Because I have several fruits dropdowns with the same collection I need to iterate trough all dropdowns and delete it from all dropdowns. This is my code now :
<script type='text/javascript'>
var id = 3;
var el= document.getElementsByClassName("fruits");
for (i=0;i<el.length;i++) {
for(var n = 0; n < el[i].length; n++) {
if(el[i][n].value == id) {
el[i][n].remove();
}
}
</script>
Though it works I wonder about that I do not need to use the parent.removeChild() method. How comes ?
P.S. I wonder that peole vote this question down. As the response shows their are several solutions. Though not all are sufficiantly explained.
Here is a snippet to play with.
The code removes the option with value = 3
window.onload = function() {
var optionToDelete = document.querySelector("select.fruits > option[value='3']");
optionToDelete.parentNode.removeChild(optionToDelete);
}
<select class="fruits">
<option value="1">Oranges</option>
<option value="2">Bananes</option>
<option value="3">Apples</option>
</select>
EDIT: Based on the updated question - I have several fruits drop-downs.
We could make use of querySelectorAll to select all matching elements and forEach to apply the desired logic on each element in the selected list.
window.onload = function() {
var optionsToDelete = document.querySelectorAll("select.fruits > option[value='3']");
optionsToDelete.forEach(function(element, index, array) {
element.parentNode.removeChild(element);
});
}
<select class="fruits">
<option value="1">Oranges</option>
<option value="2">Bananes</option>
<option value="3">Apples</option>
</select>
<select class="fruits">
<option value="1">Seville oranges</option>
<option value="2">Burro Bananes</option>
<option value="3">Baldwin Apples</option>
</select>
<select class="fruits">
<option value="1">Bergamot oranges</option>
<option value="2">Red Bananes</option>
<option value="3">Gravenstein Apples</option>
</select>
<select class="fruits" >
<option value="1" >Oranges</option>
<option value="2" >Bananas</option>
<option value="3" >Apples</option>
</select>
<script type='text/javascript'>
var valueToRemove = 1;
var select = document.getElementsByClassName('fruits');
for(var i = 0; i < select[0].length; i++) {
if(select[0][i].value == valueToRemove) {
select[0][i].remove();
}
}
</script>
Edit:
<select class="fruits" >
<option value="1">Oranges</option>
<option value="2">Bananas</option>
<option value="3">Apples</option>
</select>
<br>
<label>Input value to delete</label><input type='text' id='delete_value'>
<button onclick='remove(document.getElementById("delete_value").value)'>Delete</button>
<script type='text/javascript'>
function remove(item) {
var valueToRemove = item;
var select = document.getElementsByClassName('fruits');
for(var i = 0; i < select[0].length; i++) {
if(select[0][i].value == valueToRemove) {
select[0][i].remove();
}
}
}
</script>
You can select the desired option by using document.querySelector() and a selector of this form
A more complete list of selectors can be found here
Example
var element = document.evaluate( '//option[#value="1"]' ,document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ).singleNodeValue;
element.parentNode.removeChild(element)
My code is:
<form method="post">
<select name="item" multiple>
<option value="1">Lotus</option>
<option value="2">Sun Flower</option>
<option value="3">MNC</option>
<option value="4">DELL</option>
<option value="5">LENOVO</option>
</select>
<button type="submit" name="ss">SUBMIT</button>
</form>
<div class="mutiple">
</div>
I want to select multiple items "not wants to take value" from option list and print into div having class named multiple.
For example, if I select Lotus and Sun Flower then I want to print Lotus and Sun Flower not only its value.
If you want to make it with JavaScript, you can refer to the following code:
<form method="post">
<select name="item[]" multiple>
<option value="1">Lotus</option>
<option value="2">Sun Flower</option>
<option value="3">MNC</option>
<option value="4">DELL</option>
<option value="5">LENOVO</option>
</select>
<button type="submit" name="ss">SUBMIT</button>
</form>
<div class="multiple"></div>
<script>
$('select[name=item]').on('change', function() {
var ul = $('<ul>');
$('.multiple').empty();
$(this).find('option').each(function(index, element) {
if($(element).is(':selected')) {
ul.append('<li>' + $(element).text() + '</li>');
}
});
$('.multiple').html(ul);
});
</script>
or if you want to make it with PHP, here the code is:
if(!empty($_POST)) {
$products = array(
'1' => 'Lotus',
'2' => 'Sun Flower',
'3' => 'MNC',
'4' => 'DELL',
'5' => 'LENOVO'
);
echo "<ul>";
foreach($_POST['item'] as $item) {
echo "<li>{$products[$item]}</li>";
}
echo "</ul>";
}
You need to add brackets to the name:
<select name="item[]" multiple>
then on the server side item will be an array:
var_dump($_POST['item']);
You can put the text as the value of your select:
<select name="item[]" multiple>
<option value="Lotus">Lotus</option>
<option value="Sun Flower">Sun Flower</option>
<option value="MNC">MNC</option>
<option value="DELL">DELL</option>
<option value="LENOVO">LENOVO</option>
</select>
If you don't want to change the values, then you should map them using a DB or perhaps an array:
$pcs = [
"1"=>"Lotus",
"2"=>"Sun Flower",
"3"=>"MNC",
"4"=>"DELL",
"5"=>"LENOVO"
];
foreach($_POST['item'] as $key){
echo $pcs[$key];
}
It's easy :D
<script>
function getSelectValues(select) {
var result = [];
var options = select && select.options;
var opt;
for (var i=0, iLen=options.length; i<iLen; i++) {
opt = options[i];
if (opt.selected) {
result.push(opt.value || opt.text);
}
}
var return_div = result;
document.getElementById("selections").innerHTML = return_div;
}
</script>
<select multiple>
<option value="1">Lotus
<option value="2">Sun Flower
<option value="3">MNC
<option value="4">DELL
<option value="5">LENOVO
</select>
<button onclick="var el = document.getElementsByTagName('select')[0]; getSelectValues(el);">Show selected values</button>
<div>
<h1 id="selections"></h1>
</div>
Look this example:
https://jsfiddle.net/pm67kwkw/3/
function change() {
var select = document.getElementById("slct");
var divv = document.getElementById("container");
var value = select.value;
for (i = 0; i <value; i++) {
toAppend += "<input type='textbox' >";
}
divv.innerHTML=toAppend;`enter code here`
return;
}
I Have this code and I am calling it by dropdown menu
<select id="slct" onchange="change();">
<option value="0"> select value </option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
but its not showing anything
Declare var toAppend='' before the for loop
I have two possible dropdown list that I'm working with. The first one looks like:
<select id="drop1" name="drop1">
<option value="">Select</option>
<option value="1">January</option>
<option value="2">February</option>
...
</select>
<input type="text" value="1" onclick="set(this.value);" />
and the second one looks like
<select id="drop2" name="drop2">
<option value="1">January</option>
<option value="2">February</option>
...
</select>
<input type="text" value="1" onclick="set(this.value);" />
How can I make sure that if the value chosen in set(this.value) is = 1 (January) for instance, I will end up selecting January and not -- neither Feb.
Your'll need to iterate over the options of your <select> until you find one whose value is 1:
function selectOptionWithValue(select, value) {
value = "" + value;
var options = select.options;
for (var i = 0, len = options.length; i < len; ++i) {
if (options[i].value == value) {
select.selectedIndex = i;
return;
}
}
}
<input type="text" value="1"
onclick="selectOptionWithValue(document.getElementById('drop1'), this.value);">