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功能。

filename.php是服务器的php文件的名称。在php文件中，您所要做的就是通过$ _POST ['model']获取模型值并执行数据库操作并在响应中回显颜色名称。

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。结果相同：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

我不知道如果我是对的，但它有效！ ; - ）

＆＃13;

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

＆＃13;

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

＆＃13;

在表中选择值并显示onChange

5 个答案: