Javascript 从所选菜单中选择id后，在文本框中显示价格

我有两个选择菜单，第一个是我们选择的类型，因此下一个将过滤mysql数据库以显示Departments编号，在我从第二个selectedmenu中选择Departments编号后，我需要在文本字段中显示Departments price

第一个选定菜单

<select name="gender" id="gender" class="update">
      <option value="">Select one</option>
      <?php if (!empty($list)) { ?>
      <?php foreach($list as $row) { ?>
      <option value="<?php echo $row['id']; ?>"> <?php echo $row['name']; ?> 
        <?php }   ?>
      </option>
      <?php } ?>
  </select> 

<select name="category" 
        disabled="disabled" class="update" id="category" onChange="precio()" onClick="show()" >
       <option value="">----</option>
  </select>

---

这是您的完整解决方案-

---

为什么要将价格作为您的

选项的id

标签？为什么不像@WebDevRon示例中那样将其放在value属性中

$out[] = '<option value="'.$row['name'].'">'.$row['name'].'</option>';

编辑：

使用data attibute存储价格：

   $out[] = '<option value="'.$row['name'].'"  data-price="'.$row['precio'].'">'.$row['name'].'</option>';

---

问题是什么？为什么要生成

HTML

，

json\u编码并解码它？如果您的服务只返回数据（例如json对象）并在
javascript
中生成
HTML
，效果会更好。你还加载了jquery，那么为什么不在所有javascript中使用它呢？你看到演示了吗？你的演示并不完全是他所需要的。如果你需要一个数据库操作，那么你应该尝试json编码。演示不是我所需要的。我需要知道如何从我的数据库中获取价格字段，然后在文本框中显示它，所以当我提交表单时，我将价格添加到购买表的问题是，我有一个文本字段，显示我从第二个选择列表中获得的depertmant编号，我正在使用该值，因此如果我将该值更改为价格，它将不起作用！！！！！！因此，必须为每个
选项
存储2个值，一种解决方案是使用数据属性。我编辑了我的帖子。我不知道我应该把js代码放在哪里。你能帮我吗？只需删除函数“show（）”的代码，你就可以把js部分和其余的js代码放在一起。编辑我的帖子。
id    master        name      visible    precio 
-------------------------------------------------

1        0        Type a         0         0       

2        0        type b         0         0

3        1         101           1        20000

4        1         201           1        10000

5        2         103           1        30000

var $select2 = $('#select2');
var $text = $('#price');

$("#select1").change(function () {
    var id = $(this).val();
    if ($select2.data('options') == undefined) {
        $select2.data('options', $select2.find('option').clone());
    }
    var options = $select2.data('options').filter('[value=' + id + ']');
    $select2.html(options);

    $text.val(id);
});

$out[] = '<option value="'.$row['name'].'">'.$row['name'].'</option>';

<select name="category" 
        disabled="disabled" class="update" id="category" >
       <option value="">----</option>
</select>

$("#category").change(function () {
    var price = $(this).val();
    $('#price-input').val(price); // where "price-input" is the id of your input.
});

   $out[] = '<option value="'.$row['name'].'"  data-price="'.$row['precio'].'">'.$row['name'].'</option>';

$(function() {

    $('.update').live('change', function() {
        formObject.run($(this));
    });


    $("#category").change(function () {
        var dept_number = $(this).val();
        var price = $(this).find(':selected').data('price');
        $('#dept-input').val(dept_number);
        $('#price-input').val(price);
    });

});