选择表中的值并显示onChange - select with value in table and show onChange

我用数据库中的value输入select，当选择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数据表

将选项值设置为color，而不是设置为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);            
    }
}

由于showModel实际上从onchange获取值，并且值可以为空('')，因此您需要的是:

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

不。结果是一样的:

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

我不知道我是否正确，但它工作!: -)

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

使用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="">