Question

所以我有一个下拉列表，其中包含从我的数据库中提取的数据。我坚持根据从下拉框中选择的值填充文本框。

我的模特目前看起来像这样：

<?php
require_once('../Config/config.php');

class AppCalc 
{
    public $dbconn;

    public function __construct()
    {
        $database = new Database();
        $db = $database->dbConnection();
        $this->dbconn = $db;
    }

    public function fillDropdown () {
    $stmt = $this->dbconn->prepare("SELECT AppID, Appliance, PowerConsumption FROM appliances ORDER BY Appliance");
    $stmt->execute();
    return $stmt->fetchAll(PDO::FETCH_ASSOC);
}
}

?>

我的控制器：

<?php
require_once('../Model/applianceModel.php');
require_once('../Tool/DrawTool.php'); 

$newCalc = new AppCalc();
// instantiate drawing tool
$draw = new DrawTool();
// parse (render) appliance view
$renderedView = $draw->render('../View/applianceCalculator.php', array(
    'appliances' => $newCalc->fillDropdown()
));

echo $renderedView;
?>

和我的观点：

 $(document).ready(function() {
    $('#appliance').on('change', function () {
        $('#powerCon').val($(this[this.selectedIndex]).attr('data-powerConsumption'));
    });
})
</script>

    <div id="mainBody">
        <h2 >Energy Consumption and Cost of household appliances</h2>

        <div id="appForm">
            <form id="applianceCalc">
                Typical Appliance: 
                <select id="appliance" name="appliance">
                    <option value="" disabled selected>Select your option</option> 
                    <?php
                    foreach ($appliances as $appliance):
                        ?>
                    <option value="<?php echo $appliance['AppID']; ?>" data-powerConsumption="<?php echo $appliance['PowerConsumption']; ?>">
                        <?php echo $appliance['Appliance']; ?>
                    </option>
                    <?php
                    endforeach;
                    ?>
                </select>
                <br/>

                Power Consumption:
                <input type="text" id="powerCon" required/>
                <br/>


                Hours of use per day:
                <input type="text" name="hoursPerDay" required/>
                <br/>
    </form>

这是我正在使用的表：

CREATE TABLE IF NOT EXISTS `appliances` (
  `AppId` int(11) NOT NULL AUTO_INCREMENT,
  `Appliance` varchar(50) NOT NULL,
  `PowerConsumption` int(8) NOT NULL,
  PRIMARY KEY (`AppId`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;



INSERT INTO `appliances` (`AppId`, `Appliance`, `PowerConsumption`) VALUES
(1, 'Hairdryer', 1251),
(2, 'Microwave', 6241);

因此，在使用数据库中的值填充下拉列表时，代码可以正常工作。但是我坚持改变文本框的值。例如，如果我从下拉列表中选择“Hairdryer”，那么数字“1251”应出现在powerConsumption文本框中，但由于某种原因，文本框值不会改变。它仍然是空白。

Answer 1

啊，好吧，如果你想要在另一个区域显示所选项目的powerConsumption（它是否需要是一个文本框，如果它不可编辑？），你可以做这样的事情（这需要jQuery ）：

<script>
$(document).ready(function() {
    $('#foo').on('change', function () {
        $('#bar').val($(this[this.selectedIndex]).attr('data-powerConsumption'));
    });
})
</script>

<select id="foo" name="foo">
  <option value="">select appliance</option>
  <option value="1" data-powerConsumption="100 amp">appliance1</option>
  <option value="2" data-powerConsumption="200 amp">appliance2</option>
</select>

<input type="text" id="bar" value="" />

这里是working example。

要回答您的问题，您只需从数据库中获取该问题并将其添加到循环中的<option>，如下所示：

1]更改您的AppCalc-＆gt; fillDropdown（）函数以从表中选择列：

public function fillDropdown () {
    $stmt = $this->dbconn->prepare("SELECT AppID, Appliance, PowerConsumption FROM appliances");
    $stmt->execute();
    return $stmt->fetchAll(PDO::FETCH_ASSOC);
}

2]更改生成<option>的位置：

<?php
    foreach ($appliances as $appliance):
?>
    <option value="<?php echo $appliance['AppID']; ?>" data-powerConsumption="<?php echo $appliance['PowerConsumption']; ?>">
        <?php echo $appliance['Appliance']; ?>
    </option>
<?php
    endforeach;
?>

3]确保包含jQuery库;最简单的方法是使用jQuery CDN。将此包含在您的<head>中（jQuery的版本由您决定，但这应该足够了）：

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

那应该为你做。然后提供的示例将按您的要求执行。

根据下拉值mvc php填充文本框

1 个答案: