html - Javascript-Get selected option in table - Stack Overflow

admin管理员组

文章数量:1393072

I've an HTML table and i want to get a selected value in list in a td.

I proceed like this :

var table = document.getElementById('ZZ');
    for (var r = 0, n = table.rows.length; r < n; r++) {
        for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
            var type =table.rows[r].cells[11].innerHTML;
            alert(type);
        }
    }

And i've a result like this in an alert box

<SELECT id="" onchange=''... <OPTION value=1>A</OPTION><OPTION selected=2>B</OPTION></SELECT>

And i want to get 'B' in a var. How can i plete this?

I've an HTML table and i want to get a selected value in list in a td.

I proceed like this :

var table = document.getElementById('ZZ');
    for (var r = 0, n = table.rows.length; r < n; r++) {
        for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
            var type =table.rows[r].cells[11].innerHTML;
            alert(type);
        }
    }

And i've a result like this in an alert box

<SELECT id="" onchange=''... <OPTION value=1>A</OPTION><OPTION selected=2>B</OPTION></SELECT>

And i want to get 'B' in a var. How can i plete this?

• javascript
• html

Share Improve this question Follow edited Dec 22, 2014 at 11:30 Christian Gollhardt 17k1717 gold badges8080 silver badges117117 bronze badges asked Dec 22, 2014 at 11:14 DelfalsoDelfalso 17511 gold badge22 silver badges1414 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Since you say you get the result which you get, you could use Element.querySelector which uses css selectors to target the elements.

var type = table.rows[r].cells[11].querySelector("[selected]").innerHTML;

Note that I'm using innerHTML since there's some variations between textContent and innerText and also due to the fact that <option> cannot contain any html.

**

If your select option exist in the inner child of the td of the table and you wanna get the value, this may help you out. It worked for me

**

**HTML**

<table class="table table-borderless" id="all_table_hour">
  <tbody class="table-hours-record">
  <tr data-mytr_id=1 class="table-rowclass1">
    <td>Time</td>
    <td data-mytd1_id=1 class="table-rowtd1class1">
      <div class="time-slot">
        <span >
          <select class="hour_selected_from_all" id="hour_selected_from_all1">    
            <option selected="selected" value="00:00">0 hour</option>
            <option value="01:00">1 hour</option> 
          </select>
        </span>
      </div>
    </td>
    <td >
      <div class="time-slot">
        <input placeholder="$10.00">
      </div>
    </td>
  </tr>

  </tbody>
</table>

**

CODE JS

**

var testTable = document.getElementById('all_table_hour');

for (i = 1; i < testTable.rows.length; i++) {

    var recordcells = testTable.rows.item(i).cells;
    for (var j = 0; j < recordcells.length; j++) {
        record = recordcells.item(j).getElementsByTagName("select")[0].value
        //Now you can add this record as per your required format (list or in json format)
    }
}

 html:

    <SELECT id="orange" onchange=''... >
       <OPTION value=1>A</OPTION>
       <OPTION selected=2>B</OPTION>
    </SELECT>

    script:

   var allDropdown =  document.getElementsByTagName("select");
   allDropdown[0].value;
  allDropdown[1].value;

/**********************************************************/

for(var item in allDropdown ){
      alert(allDropdown[item].value)
    } 

As in your code you are able to get object of TD then you can use "Find" function to find select and take selected option out from the select.
.find("select") will give you select jquery object and then through sudo code used :selected" you can find selected option from list.It will  return you "B".
var table = document.getElementById('ZZ');
for (var r = 0, n = table.rows.length; r < n; r++) {
	for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
		var type =table.rows[r].cells[11].find("select")**.find(":selected").text()**;
		alert(type);// B
		
	}
}

Hope this will help

本文标签： htmlJavascriptGet selected option in tableStack Overflow