выбрать со значением в таблице и показать onChange

Question

У меня есть select ввод с value из базы данных, я покажу другие input значение при выборе onChange.

function showModel(id) { 
 
    if (id === "") { 
 
     $("input[name=color]").val(""); 
 
    } else if ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 
 
}

<select onchange='showModel(this.value)' name="model" class="form-control" required=""> 
 
    <option value="">- SELECT -</option> 
 
    <?php 
 
    $qry = $db->query("SELECT name_model, color FROM product "); 
 
    while ($fet = $qry->fetch_assoc()) { 
 
     ?> 
 
    <option value="<?php echo $fet['name_model']; ?>"><?php echo $fet['name_model']; ?></option> 
 
    <?php } ?> 
 
</select> 
 
<input type="text" value="" name="color" readonly="">

, когда я изменить select свои шоу color данные из таблицы

Answer 1

Вместо установки значения параметра в name_model, установите его цвет вместо. Затем он должен работать так, как ожидалось.

<option value="<?php echo $fet['color']; ?>"><?php echo $fet['name_model']; ?></option> 

В вашем скрипте отсутствует другая часть.

function showModel(id){ 
    if (id === "") { 
     $("input[name=color]").val(""); 
    } else { 
     $("input[name=color]").val(id);    
    } 
} 

Answer 2

так showModel фактически получает значение из onchange, а значение может быть пустым ('') все, что вам нужно это:

function showModel(id){ 
     $("input[name=color]").val(id); 
} 

Answer 3

Использование JavaScript OnChange функции.

Имя файла php - это имя файла php вашего сервера. В php-файле все, что вам нужно сделать, это получить значение модели с помощью $ _POST ['model'] и выполнить операцию DB и эхо-имя цвета в ответе.

function showModel(value){ 
 
    if (value === "") { 
 
    $("input[name=color]").val(""); 
 
    } else{  
 
    $.ajax({ 
 
     url: 'filename.php', 
 
     type: 'GET', 
 
     data: 'model='+value, 
 
     success: function(data) { 
 
     //called when successful 
 
     $("input[name=color]").val(data); 
 
     }, 
 
     error: function(e) { 
 
     //called when there is an error 
 
     //console.log(e.message); 
 
     } 
 
    }); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select onchange='showModel(this.value)' name="model" class="form-control" required=""> 
 
    <option value="">- SELECT -</option> 
 
    <option value="1">Blue</option> 
 
    <option value="2">Yellow</option> 
 
    <option value="3">Red</option> 
 
</select> 
 
<input type="text" value="" name="color" readonly="">

Другой способ с помощью JQuery .on("change" событий слушателя.

$("select[name='model']").on("change",function(){ 
 
    var selectedvalue = $(this).val(); 
 
    if (selectedvalue === "") { 
 
    $("input[name=color]").val(""); 
 
    } else{ 
 
    $("input[name=color]").val(selectedvalue); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="model" class="form-control" required=""> 
 
    <option value="">- SELECT -</option> 
 
    <option value="1">Blue</option> 
 
    <option value="2">Yellow</option> 
 
    <option value="3">Red</option> 
 
</select> 
 
<input type="text" value="" name="color" readonly="">

Answer 4

Нет IF. Это тот же самый результат:

function showModel(id){ 
 
    $("input[name=color]").val(id); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select onchange='showModel(this.value)' name="model" class="form-control" required=""> 
 
    <option value="">- SELECT -</option> 
 
    <option value="123">123</option> 
 
    <option value="321">321</option> 
 
</select> 
 
<input type="text" value="" name="color" readonly="">

Answer 5

Я не знаю, если я прав, но это работает! ;-)

$('select[name=model]').on('change', function() { 
 
    var valModel = $(this).val(); 
 
    if (valModel != "- SELECT -") { 
 
    $("input[name=color]").val(valModel); 
 
    } else { 
 
    $("input[name=color]").val(""); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="model" class="form-control" required=""> 
 
    <option>- SELECT -</option> 
 
    <option value="Model_1">Model_1</option> 
 
    <option value="Model_2">Model_2</option> 
 
    <option value="Model_3">Model_3</option> 
 
</select> 
 
<input type="text" value="" name="color" readonly="">