заполнить HTML-форму, когда выберите значение из таблицы MySQL, используя раскрывающееся меню

Question

У меня есть столовые звонки products_tbl

+-----+------------+----------------+-------+------+-----------+
|pr_id|product_name|product_category|Price1 |Price2|product_img|
+-----+------------+----------------+-------+------+-----------+
|1    |Apple       |fruits          |12     |15    |aimg.jpg   |
|2    |Orange      |fruits          |10     |11    |orimg.jpg  |
|3    |Iphone X    |Electronics     |900    |1025  |iphimg.jpg |
|4    |FJ-Eye Lens |Accessories     |20     |25    |fjimg.jpg  |
+-----+------------+----------------+-------+------+-----------+

Я взял product_name из таблицы и поместил его в Выберите параметр , и когда пользователь выберет значение из параметра выбора, он отобразит его изображение и поместит его в тег img (это сработало идеально) ).

Я хочу, чтобы когда пользователь выбирал какое-либо название продукта из опции выбора, он отображал цену1 и цену2 в виде ввода текста 2 так же, как изображение

products.php

$productQ = "SELECT * FROM products_tbl ORDER BY product_category ASC";
try { 
    $stmt2 = $db->prepare($productQ); 
    $stmt2->execute();
} catch(PDOException $ex) { 
    die("Failed to run membersQ: " . $ex->getMessage()); 
} 
$produtsrows = $stmt2->fetchAll();

echo"<select name='dropdown' id='dropdown' required>
        <option selected disabled>Choose</option>";
    $category = "";
    foreach($produtsrows as $prow): 
        if ($category != $prow['product_category']) {
            if ($category != "") {
                echo "</optgroup>";
            }
            $category = $prow['product_category'];
            echo "<optgroup label=".$prow['product_name'].">";
        }
        echo"   <option value='imgs/".$prow['product_img']."'>".$prow['product_name']."</option>";
    endforeach;
    echo "</optgroup>
</select>
<input type='text' name='p1' id='p1' value=''>
<input type='text' name='p1' id='p2' value=''>

<img id='image' src='' alt=''>";

и JavaScript

<script type="text/javascript">
$(function(){
    $( '#dropdown' ).change(function(){
        $( '#image' ).attr( 'src', $( this ).val() + '' );
        $( '#p1' ).attr( 'value', $( this ).val() + '' );
        $( '#p2' ).attr( 'value', $( this ).val() + '' );
    })

});

</script>

когда я выбираю любое значение из опции выбора, в текстовом поле отображается имя изображения, а не цена1 и цена2

как я могу отобразить цену1 и цену2, а не имя изображения

Answer 1

Bind the attribute in option and change the script..

<select id="slct" onchange="dropdownhange(this)">
<option value="1" data-cust="a"> 1 </option>
<option value="2" data-cust="b"> 2 </option>
<option value="3" data-cust="c"> 3 </option>
</select>

function dropdownhange(obj){
  console.log($(obj).val());
  console.log($(obj).children('option:selected').attr('data-cust'));
}

https://codepen.io/pixel-lab/pen/zJdqvv?editors=1111

Answer 2

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

Решение:

Шаг 1: Добавить data-price1='.$prow['Price1'].' и data-price2='.$prow['Price2'].'

Шаг 2: Используйте jquery attr, чтобы получить data-price* значения

Пример:

.php Файл:

$productQ = "SELECT * FROM products_tbl ORDER BY product_category ASC";
try { 
    $stmt2 = $db->prepare($productQ); 
    $stmt2->execute();
} catch(PDOException $ex) { 
    die("Failed to run membersQ: " . $ex->getMessage()); 
} 
$produtsrows = $stmt2->fetchAll();

echo"<select name='dropdown' id='dropdown' required>
        <option selected disabled>Choose</option>";
    $category = "";
    foreach($produtsrows as $prow): 
        if ($category != $prow['product_category']) {
            if ($category != "") {
                echo "</optgroup>";
            }
            $category = $prow['product_category'];
            echo "<optgroup label=".$prow['product_name'].">";
        }
        echo"   <option value='imgs/".$prow['product_img']."' data-price1='.$prow['Price1'].' data-price2='.$prow['Price2'].'>".$prow['product_name']."</option>";
    endforeach;
    echo "</optgroup>
</select>
<input type='text' name='p1' id='p1' value=''>
<input type='text' name='p1' id='p2' value=''>

<img id='image' src='' alt=''>";

JQuery:

$(function(){
    $( '#dropdown' ).change(function(){
        $('#image').attr( 'src', $( this ).val() + '' );
        $('#p1').attr( 'value', $(this).children('option:selected').attr('data-price1'));
        $('#p2').attr( 'value', $(this).children('option:selected').attr('data-price2'));
    })
});

Проверьте ниже HTML код:

$(document).ready(function () {
    $('#dropdown').change(function () {
        $('#p1').attr('value', $(this).children('option:selected').attr('data-price1'));
        $('#p2').attr('value', $(this).children('option:selected').attr('data-price2'));
    })
});//jq

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Change list : 
<select id="dropdown">
    <option data-price1="12" data-price2="15">Apple</option>
    <option data-price1="10" data-price2="11">Orange</option>
    <option data-price1="900" data-price2="1025">Iphone X</option>
    <option data-price1="20" data-price2="25">FJ-Eye Lens</option>
</select>
<br />
Price 1 : <input type="text" id="p1" />
<br />
Price 2 : <input type="text" id="p2" />

Надеюсь, это поможет.