javascript - 从所选菜单中选择 ID 后，在文本框中显示价格

Question

我有两个选定的菜单，第一个菜单我们选择了类型，因此下一个将过滤 mysql 数据库以显示部门编号，并且在我从第二个选定菜单中选择部门编号后，我需要在文本字段中显示部门价格.

第一个选定的菜单

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

这就是我获取第二个选定值的值

更新.php

<?php
if (!empty($_GET['id']) && !empty($_GET['value'])) {

    $id = $_GET['id'];
    $value = $_GET['value'];


    try {

        $objDb = new PDO('mysql:host=localhost;dbname=name', 'root', '1234');
        $objDb->exec('SET CHARACTER SET utf8');

        $sql = "SELECT * 
                FROM  `depertamientos` 
                WHERE `master` = ?";
        $statement = $objDb->prepare($sql);
        $statement->execute(array($value));
        $list = $statement->fetchAll(PDO::FETCH_ASSOC);

        if (!empty($list)) {

            $out = array('<option value="">Select one</option>');

            foreach($list as $row) {
                if ($row['visible'] == 0) { 
                    $out[] = '<option value="'.$row['name'].'" id="'.$row['precio'].'">'.$row['name'].'</option>';
                }
            }
            echo json_encode(array('error' => false, 'list' => implode('', $out)));

        } else {
            echo json_encode(array('error' => true));
        }

    } catch(PDOException $e) {
        echo json_encode(array('error' => true));
    }

} else {
    echo json_encode(array('error' => true));
}

核心.js

var formObject = {
    run : function(obj) {
        if (obj.val() === '') {
            obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
        } else {
            var id = obj.attr('id');
            var v = obj.val();
            jQuery.getJSON('mod/update.php', { id : id, value : v}, function(data) {
                if (!data.error) {
                    obj.next('.update').html(data.list).removeAttr('disabled');
                } else {
                    obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
                }
            });
        }
    }
};
$(function() {

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

});

js function 

>  <script src="javascripts/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">


            function show() {
                var select = document.getElementById('category');
                var input = document.getElementById('ds');
                var change = document.getElementById('dpto');
                var deptprecio = document.getElementById('11');

                        select.onchange = function() {
                                input.value = select.value;
                                deptprecio.value = "I don't know what to do here ???? ";
                                change.value = select.value;

                        }
            }

    </script>

我的数据库:

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

Answer 1

为什么将价格作为 options 标签的 ID？为什么不像 @WebDevRon 示例那样将其放入 value 属性中？

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

删除 HTML 标记中的 javascript 事件:

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

如果我理解您的请求，您可以将您的 javascript 函数“show”替换为如下所示:

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

JS:

$(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);
    });

});

FIDDLE DEMO