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

因此，我有一个下拉列表，填充了从我的数据库中提取的数据。我坚持填充文本框基于从下拉框中选择的值。根据下拉值mvc填充文本框php

我的模型目前是这样的：

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

，这里是与工作表IM

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文本框中，但由于某些原因，文本框的值不会改变。它仍然是空白的。

来源

2016-02-26 Spud91

如果您将该值从下拉列表中复制到页面上的另一个表单元素，则您的问题将不在您的PHP或MySQL中。您需要使用javascript来完成这项工作。那么您需要复制哪些元素，以及需要去哪些元素，具体从您的'？ – Davis

使用Ajax从数据库获取值或使用javascript来更新带有选定选项的文本框。 –

我不想从我的下拉列表中复制一个值。我想要PowerConsumption文本框中显示所选项目的powerConsumption。 – Spud91

啊，好的，如果你想在另一个区域显示所选项目的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-> fillDropdown（）功能从表中选择列：

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

2]更改，你生成你<option> S：

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

这应该为你做它。然后提供的示例将按照您的要求进行。

来源

2016-02-26 21:04:58 Davis

感谢您的回复。但powerConsumption存储在数据库中，我希望这些值出现在文本框 – Spud91

没问题。详情请参阅我的编辑。 – Davis

JavaScript将需要运行jQuery。你在页面上包含jQuery库吗？如果您有这方面的问题，请参阅我的编辑以获取最简单的方法。 – Davis

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

回答

相关问题