选择表中的值并显示 onChange

Question

我有@ 987654321用value从数据库输入，我将在选择onChange时显示input值。

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>

您的脚本缺少 else 部分。

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

没有如果。结果是一样的：

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 4

我不知道我是否正确，但它有效！ ;-)

$('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="">

Answer 5

使用javascript onchange函数。

filename.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="">