Question

有没有办法找到td的文本内容，然后将该文本作为选择下拉列表中的第一行或选项？

<table class="options">
    <tbody>
        <tr>
            <td><b>Colour:</b></td>
            <td>
                <select>
                    <option selected="" value="">Select:</option>
                    <option value="1">Black</option>
                    <option value="2">White</option>
                </select>
            </td>
        </tr>
    </tbody>
</table>

第一个td内容（Color :)基本上需要代替第一个选项（Select :)。我自己没有完全控制选择列表所以我必须尝试动态地执行此操作。试图节省空间。理想情况下，移动内容后我也想删除td。

Answer 1

从上一个单元格中获取标题并将其置于第一个选项中。请在此处查看：https://jsfiddle.net/w07vg0ef/

试试这个：

// do for all selects on the page
$('select').each(function (index, element) {

    // store the select
    var select = $(element)

    // get the caption from the previous cell
    var caption = select.parent().prev('td').text()

    // put the caption to the first option
    select.find('option').first().html(caption) 
})

Answer 2

＆＃13;

$('select').prepend('<option selected=selected>'+$('select').closest('tr').find('td:nth-child(1)').text()+'</option>');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="options">
  <tbody>
    <tr>
      <td><b>Colour:</b>
      </td>
      <td>
        <select>
          <option selected="" value="">Select:</option>
          <option value="1">Black</option>
          <option value="2">White</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

试试这个

Answer 3

如果您只想JavaScript进行此操作，请查看以下内容：

添加选项作为第一个值，但作为新值：

＆＃13;

var getColor = document.getElementsByTagName("td")[0];
var selectedColor = getColor.getElementsByTagName("b")[0].innerHTML;
var select = document.getElementsByTagName("select")[0];
var option = document.createElement("option");
option.text = selectedColor;
select.add(option, select[0]);

＆＃13;

<table class="options">
<tbody>
<tr>
<td><b>Color:</b></td>
<td>
<select>
<option selected="" value="">Select:</option>
<option value="1">Black</option>
<option value="2">White</option>
</select>
</td>
</tr>
</tbody>
</table>

＆＃13;

添加选项作为当前第一个值的替换值：

＆＃13;

var getColor = document.getElementsByTagName("td")[0];
var selectedColor = getColor.getElementsByTagName("b")[0].innerHTML;
var select = document.getElementsByTagName("select")[0];
var option = select.options[0];
option.innerHTML = selectedColor;

＆＃13;

<table class="options">
<tbody>
<tr>
<td><b>Color:</b></td>
<td>
<select>
<option selected="" value="">Select:</option>
<option value="1">Black</option>
<option value="2">White</option>
</select>
</td>
</tr>
</tbody>
</table>

＆＃13;

Answer 4

这是一个快速纯粹的JavaScript解决方案。如果可能的话，我会在TD上添加一个类，这样你就可以更好地定位它或类似的东西。

＆＃13;

var firstTD = document.getElementsByClassName('options')[0].getElementsByTagName('td')[0];
var text = firstTD.innerHTML;

var selectBox = document.getElementsByTagName('select')[0];
var option = document.createElement('option');
option.setAttribute('value', '');
option.innerHTML = text;


selectBoxFirstChild = document.getElementsByTagName('select')[0].children[0];
selectBox.insertBefore(option, selectBoxFirstChild);

＆＃13;

使td内容首先选择选项

4 个答案: