[자바 스크립트] td 내용을 먼저 선택 옵션

이전 셀에서 캡션을 가져 와서 첫 번째 옵션에 넣으십시오. 여기에서 확인하세요 : 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) 
                        })
                        

-------------------

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

<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>

스 니펫 확장

이 시도

-------------------

JavaScript그때 까지만하려는 경우 다음을 살펴보십시오.

옵션을 첫 번째 값으로 추가하지만 새 값으로 추가하십시오.

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]);

<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>

스 니펫 확장

현재 첫 번째 값의 대체 값으로 옵션 추가 :

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;

<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>

스 니펫 확장

-------------------

다음은 빠른 순수 자바 스크립트 솔루션입니다. 가능하다면 TD에 클래스를 추가하여 더 나은 목표로 삼을 수 있습니다.

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);

스 니펫 확장

출처
https://stackoverflow.com/questions/39916095