-1
function myFunction() {
    var x = document.getElementById("mySelect").value;
    document.getElementById("demo").innerHTML = x ;
}

I want to be able to use that in each table td

this is my example i need to change the value in the table cell according the selected value in the combobox but it is alwayse only change the first cell not each cell onclick

please i need a help that when i click at any cell it changes into the combobox value please i need help

this is my example

https://jsfiddle.net/h5mdj1w7/1/

Saumya Rastogi
  • 13,159
  • 5
  • 42
  • 45
medo
  • 41
  • 1
  • 6
  • [ID's Must Be Unique](http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme), specifically because it will cause problems in [JavaScript](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) and CSS when you try to interact with those elements. – Jay Blanchard Dec 20 '16 at 13:35
  • i know that bro and i tried to change the js function from getelemetbyid into getelementsbyclassname but did not work – medo Dec 20 '16 at 13:47
  • i need to click any cell and it changes into the combobox selected value ... can you help me please in that – medo Dec 20 '16 at 13:51

1 Answers1

2

Use the jQuery event onclick to achieve this.

$("td").on("click", function(){
    var x = document.getElementById("mySelect").value;
  $(this).html(x);
})


$("td").on("click", function(){
 var x = document.getElementById("mySelect").value;
  $(this).html(x);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>A demonstration of how to access a SELECT element</h3>

<select id="mySelect" >
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
    <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>

<table style="width:700px;height:700px;margin:0 auto;border:1px solid black;" >
<tr>
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
 <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
 <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
</tr>
<tr>
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
 <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
 <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
</tr>
<tr>
 <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
 <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
 <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
</tr>
<tr>
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
 <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
 <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td>
</tr>
</table>
Jigarb1992
  • 828
  • 2
  • 18
  • 41