Блог

Таким образом, я могу заполнить выпадающий список информацией из базы данных, однако мне нужно, чтобы, когда я нажимаю на опцию в раскрывающемся списке, в нем должно отображаться описание этой выбранной опции (элемента) в элементе ячейки данных таблицы. Он не хочет ничего показывать в табличных данных, когда пользователь выбирает опцию.

Это прекрасно работает из выпадающего списка в текстовое поле (не внутри таблицы).

HTML / PHP

           <table class="inventory">
           <thead>
              <th>
                 <span>
                    <h2>Service Date</h2>
                 </span>
              </th>
              <th>
                 <span>
                    <h2>Item</h2>
                 </span>
              </th>
              <th>
                 <span>
                    <h2>Description</h2>
                 </span>
              </th>
              <th>
                 <span>
                    <h2>Rate</h2>
                 </span>
              </th>
              <th>
                 <span>
                    <h2>Quantity</h2>
                 </span>
              </th>
              <th>
                 <span>
                    <h2>Subtotal</h2>
                 </span>
              </th>
           </thead>
           <tbody>
              <tr>
                 <!------ Service Date -------->
                 <td>
                    <a class="cut">-</a><span contenteditable></span>           
                 </td>
                 <!------ Item -------->
                 <td>
                    <span contenteditable>
                       <div class="productSelect">
                          <select name="pull_data" id="pull_data">
                             <option value="" disabled selected>Click to See Products</option>
                             <?php
                                $records = mysqli_query($conn, "SELECT * FROM products");
                                    while($data = mysqli_fetch_array($records))
                                                    {
                                  
                                 echo '<option value="'.$data['name'].'" data-description="' . $data['description'].'">' . $data['name'] . '</option>';
                                    }
                                ?>
                          </select>
                       </div>
                    </span>
                 </td>
                 <!------ Description -------->
                 <td>
                    <span id="details" name="details" contenteditable></span>
                 </td>
 

язык JavaScript

       <script>
     var mySelect = document.getElementById("pull_data");
     mySelect.addEventListener("change", function() {
     var myOptionFour = mySelect.options[mySelect.selectedIndex].getAttribute("data-description");
        document.getElementsById('details').value = myOptionFour;
     
     });
     
     </script>
 

В вашем вопросе есть много неясного, и вам следует опубликовать более подробную информацию. Но вот пример того, что вы, возможно, ищете:

 <table class="inventory">
    <thead>
        <th>
            <span>
                <h2>Service Date</h2>
            </span>
        </th>
        <th>
            <span>
                <h2>Item</h2>
            </span>
        </th>
        <th>
            <span>
                <h2>Description</h2>
            </span>
        </th>
        <th>
            <span>
                <h2>Rate</h2>
            </span>
        </th>
        <th>
            <span>
                <h2>Quantity</h2>
            </span>
        </th>
        <th>
            <span>
                <h2>Subtotal</h2>
            </span>
        </th>
    </thead>
    <tbody id="table_body">
        <tr>
            <!------ Service Date -------->
            <td>
                <a class="cut">-</a><span contenteditable></span>
            </td>
            <!------ Item -------->
            <td>
                <span contenteditable>
                    <div class="productSelect">
                        <select name="pull_data" id="pull_data">
                            <option value="" disabled selected>Click to See Products</option>
                            <?php

                                $datas = array(
                                    array(
                                        "name"=>"val1",
                                        "description"=>"dis is val1",
                                    ),
                                    array(
                                        "name"=>"val2",
                                        "description"=>"dis is val2",
                                    ),
                                    array(
                                        "name"=>"val3",
                                        "description"=>"dis is val3",
                                    ),
                                );

                                    foreach ($datas as $key => $data) {
                                        echo '<option value="'.$data['name'].'" data-description="' . $data['description'].'">' . $data['name'] . '</option>';
                                    }
                                ?>
                        </select>
                    </div>
                </span>
            </td>
            <!------ Description -------->
            <td data-name="details">
                <span contenteditable></span>
            </td>
</table>



<script>
    var mySelect = document.getElementById("pull_data");

    var t = mySelect.parentNode.parentNode.parentNode.parentNode.querySelectorAll(":scope > td[data-name='details']")[0].children[0];
    
    mySelect.addEventListener("change", function () {
        var myOption = mySelect.options[mySelect.selectedIndex].getAttribute("data-email"); // None existing
        //document.getElementById('mail').value = myOption; // None existing
        var myOptionTwo = mySelect.options[mySelect.selectedIndex].getAttribute("data-street"); // None existing
        //document.getElementById('street').value = myOptionTwo; // None existing
        var myOptionThree = mySelect.options[mySelect.selectedIndex].getAttribute("data-rate"); // None existing
        //document.getElementById('price').value = myOptionThree; // None existing
        var myOptionFour = mySelect.options[mySelect.selectedIndex].getAttribute("data-description");
        // document.('details')[2].value = myOptionFour;

        t.innerHTML = myOptionFour;

    });
</script>
 

Теперь, если это не сработает, пожалуйста, дополните свой вопрос, по крайней мере, следующей информацией: весь код (без пропусков каких-либо закрывающих HTML-тегов), информация о базе данных, которую вы используете для импорта информации в таблицу, четкий вопрос на простом английском языке и четкое описание того, чего вы стремитесь достичь, и, наконец, удалите JS-код, который вы отправили, из кода, который не имеет отношения к отправленному вами HTML.