从选定菜单中选择ID后,在文本框中显示价格

时间:2014-03-01 19:46:26

标签: javascript php jquery html mysql

我有两个选中的菜单,第一个我们选择了类型,所以下一个将过滤mysql数据库以显示分页号码,我需要在我从第二个选定菜单中选择depertment数字后显示文本文件中的depertment价格

第一个选择的菜单

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

这就是我得到第二个选定值的值

update.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));
}

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

2 个答案:

答案 0 :(得分:1)

为什么要将价格作为options代码的ID?为什么不像在@WebDevRon示例中那样将其置于价值属性中?

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

编辑:

使用data-attibute存储价格:

   $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

答案 1 :(得分:0)

以下是您的完整解决方案 - Demo

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