Develop Reference

Showing value of dropdown item in multi-row table with javascript

I have a table that contains 2 columns. The first one has a dropdown that needs to be selected in order to display its value in the second column. The problem is that only the first row of the table is being updated. When selecting the second dropdown, the first row is being updated. I am not a javascript developer and I am searching how to address this problem.
Here is part of the code:
function updateinput(e) {
var selectedOption = e.options[e.selectedIndex];
document.getElementById('viewvalue').value = selectedOption.getAttribute('data-name');
}
<tr>
<td>
<select onchange="updateinput(this)">
<option data-name="">Select</option>
<option data-name="value 1">test 1</option>
<option data-name="value 2">test 2</option>
</select>
<td><input type="text" id="viewvalue" name="viewvalue"></td>
<br>
<td>
<select onchange="updateinput(this)">
<option data-name="">Select</option>
<option data-name="value 1">test 1</option>
<option data-name="value 2">test 2</option>
</select>
<td><input type="text" id="viewvalue" name="viewvalue"></td>
</tr>

You have to keep reference to the select field. Since you already used the data-attribute, I did the same in the example.
The attached data-select-index allows you to reference the id of the corresponding input-field. E.g. select-tag data-select-index="num1" references input-tag id="view-num1" and so on
function updateinput(e) {
var selectedOption = e.options[e.selectedIndex];
document.getElementById('view-' + e.getAttribute('data-select-index')).value = selectedOption.getAttribute('data-name');
}
<tr>
<td>
<select data-select-index="num1" onchange="updateinput(this)">
<option data-name="">Select</option>
<option data-name="value 1">test 1</option>
<option data-name="value 2">test 2</option>
</select>
<td><input type="text" id="view-num1" name="viewvalue"></td>
<br>
<td>
<select data-select-index="num2" onchange="updateinput(this)">
<option data-name="">Select</option>
<option data-name="value 1">test 1</option>
<option data-name="value 2">test 2</option>
</select>
<td><input type="text" id="view-num2" name="viewvalue"></td>
</tr>

Array Question related to both HTML and Javascript

I have this simple bit of code. When the user chooses Others, an <input type=text> should appear.
But it only works when there is only one value selected.
Users can randomly add in the same select type, so the code can't be changed. For what I know, in javascript need to use foreach.
So my question is, how to let each of the <input type=text> appear in EACH of the select elements instead of it only appearing in the first one.
function Pack(val){
var element=document.getElementById('otherpack');
if(val=='others')
element.style.display='block';
else
element.style.display='none';
}
<select name="Type[]" onchange='Pack(this.value);' required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
</select>
<select name="Type[]" onchange='Pack(this.value);' required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
</select>
<select name="Type[]" onchange='Pack(this.value);' required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
</select>

Here is my solution:
function Pack(v) {
var inputBox=v.nextSibling;
var selectedValue=v.options[v.selectedIndex].value;
if (selectedValue=="others") {
inputBox.style.display='block';
} else {
inputBox.style.display='none';
}
}
This should be the most stable solution.

I would prefer to make change events into javascript side instead of making it in HTML..
As suggested it is not good to use input inside select so make input outside of select box..
const selectBoxes = document.querySelectorAll('select');
function Pack(select) {
const selectedInput = select.nextElementSibling;
if(select.value === 'others')
selectedInput.style.display='block';
else
selectedInput.style.display='none';
}
selectBoxes.forEach(select => {
select.addEventListener('change', Pack.bind(this, select))
})
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
<br>
<br>
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
<br>
<br>
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>

id attributes should have unique values, so your selector will always select the first match.
Secondly, input elements are not allowed to be children of select elements. select elements can only have optgroup or option elements as children
It is also best practice to attach listeners via JavaScript code instead of onchange attributes. You can listen at the document level ("event delegation") to avoid repeating several listeners (one per select element).
Here is how it could work:
function Pack(e){
let select = e.target;
if (select.name !== "Type[]") return;
let element = select.nextElementSibling; // this finds the INPUT element
element.style.display = select.value === "others" ? "block" : "none";
}
document.addEventListener("change", Pack);
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" style="display:none"/>
<br>
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" style="display:none"/>
<br>
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" style="display:none"/>

Have you tried giving them unique ids? if you wanna have the same identifier in different elements, maybe use the class attribute instead.
Hope it helps, good luck !
edit: actually, now I see you're calling them with an id that isn't unique. Give each of the text-inputs their own id and it should work
ids are meant to be unique in the code, so whenever you call your function it assumes that there is only one element with that id

Get text from closest selected dropdown option with class on button click

I have many dropdowns, when I click the button I want it to look up the select option that is selected and alert me the text it says, like 'grape'.
It must use .closest, have tried many variations but cant seem to find it.....
<select name="div0" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" value="Edit Row">
<select name="div1" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" value="Edit Row" class="editrowbutton">
JQUERY (Nearest I can get)
$(document).on('click', '.editrowbutton', function() {
var thetext = $(this).closest('select').find('option:selected').text();
alert(thetext);
});

You are missing the class editrowbutton on your buttons in the example.
use .prev to get the previous element from target.
$(document).on('click', '.editrowbutton', function() {
var thetext = $(this).prev().find('option:selected').text();
alert(thetext);
});
http://jsfiddle.net/SeanWessell/wt00c2wu/
.closest looks up the tree at parents. Since the select is not a parent you will not return anything.
If you wanted to search the siblings you can use prev('selector') or next('selector') as well.
https://api.jquery.com/category/traversing/tree-traversal/

You can also use the data-* attribute, preventing DOM position mistakes.
$(function(){
$(document).on("click",'.editrowbutton',function(){
var target = $(this).data("select");
alert($('select[name='+target+'] option:selected').text())
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="div0" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" data-select="div0" class="editrowbutton" value="Edit Row">
<select name="div1" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" data-select="div1" class="editrowbutton" value="Edit Row">

Multiple select change event handle

html:
<tr><td>
<select id="fruits" name = "fruits[]">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="mango">Mango</option>
<option value="grape">Grape</option>
<option value="watermelon">watermelon</option>
</select>
</td>
<td>
<input type="text" name="color[]" />
</td>
<tr>
<td>
<select id="fruits" name = "fruits[]">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="mango">Mango</option>
<option value="grape">Grape</option>
<option value="watermelon">watermelon</option>
</select>
</td>
<td>
<input type="text" name="color[]" />
</td></tr>
js :
$(function() {
$('#fruits').change(function(e) {
alert("a");
var selected = $(e.target).val();
console.dir(selected);
});
});
The user can add unlimited select option panel.
I want to handle which select option change.
For example if second select option is changed, i want to change second select option' s input color. How can i handle them ?

Use class instead of ID if you have multiple elements.
$(function() {
$('.fruits').change(function(e) {
var selected = $(this).val();
alert(selected);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr>
<td>
<select class="fruits" name="fruits[]">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="mango">Mango</option>
<option value="grape">Grape</option>
<option value="watermelon">watermelon</option>
</select>
</td>
<td>
<input type="text" name="color[]" />
</td>
<tr>
<td>
<select class="fruits" name="fruits[]">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="mango">Mango</option>
<option value="grape">Grape</option>
<option value="watermelon">watermelon</option>
</select>
</td>
<td>
<input type="text" name="color[]" />
</td>
</tr>
</table>

1) Id must be unique. Change that to class
<select class="fruits" name = "fruits[]">
and now you can use this to detect the current object
$(function() {
$('.fruits').change(function(e) {
alert("a");
var selected = $(e.target).val();
console.dir(selected);
$(this).css("background-color", "colorName"); // or any css property
});
});

Add a class attribute to both selects.
Then you can use that in your jQuery selector. As IDs should be unique.
I.e. if I gave the select an attribute class="fruit" I could then use the following selector.
$(".fruit").change(function() {});

Hide label when select item from list - javascript

How i can hide label when the user select item from list , i have this code to hide input text , but how i can hide the label for that input text?
<form name="myform">
<table>
<td>
<select name="one" onchange="if (this.selectedIndex==8){this.myform['other'].style.visibility='visible'}else {this.myform['other'].style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">3</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="other">Other</option>
</select>
<label>Other</label><input type="textbox" name="other" style="visibility:hidden;"/>
</td>
</table>
</form>
i want to hide <label>Other</label> how i can do that ?

DEMO
you can not match text or value of dropdown like this this.selectedIndex
change it to this.selectedIndex == 8 to match the index
give textbox id="other" to show or hide it.
<select name="one" onchange="if (this.selectedIndex== 8){document.getElementById('other').style.visibility='visible'}else {document.getElementById('other').style.visibility='hidden'};">
Updated Demo
made new id for label l_other
<select name="one" onchange="if (this.selectedIndex== 8){document.getElementById('l_other').style.visibility='visible';
document.getElementById('other').style.visibility='visible'}else {document.getElementById('l_other').style.visibility='hidden';
document.getElementById('other').style.visibility='hidden'};">
Demo
Making use of single div with id other wrap label and textbox inside it
<select name="one" onchange="if (this.selectedIndex== 8){
document.getElementById('other').style.visibility='visible'}else{
document.getElementById('other').style.visibility='hidden'}">

Change your select tag and input text as below.
<select name="one" onchange="if (this.selectedIndex=='other'){document.getElementById("otherText").style.visibility='visible'}else {document.getElementById("otherText").style.visibility='hidden'};">
<div id="otherText" style="visibility:hidden;"><label>Other</label><input type="textbox" name="other" /></div>
Hope this helps.

function OnChange(that) {
var lblOther = document.getElementById('lblOther');
if (that.options[that.selectedIndex].text == 'Other') {
lblOther.style.display = "block";
}
else {
lblOther.style.display = "none";
};
}
<form name="myform">
<table>
<td>
<select name="one" onchange="OnChange(this);">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">3</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="other">Other</option>
</select>
<label id="lblOther" style="display: block;">Other</label><input type="textbox" name="other" style="visibility: hidden;" />
</td>
</table>
</form>