Question

在我的任务中，我想从下拉列表中选择一个名称。然后我想在其他div标签中打印与该名称相关的技术。我不知道该怎么做。我成功从数据库中获取数据以获取下拉选项。这是我的代码。

candidate name:
<select name="candidate_id" class="form-control" id="can_name" value="<?php echo set_value('candidate_id');?>"palceholder="candidate full name" required>
    <option></option>
    <?php foreach ($candidate as $r): ?>
        <option value="<?php echo $r->candidate_id; ?>"><?php echo $r->candidate_name." "; ?></option>
    <?php endforeach; ?>
</select>
</select>

<div class="error"><?php echo form_error("candidate_name");?></div><br>
<div></div><br> <!-- here I want to print technology related to canididate name -->

Answer 1

让我们使用jQuery库，因为这将简化您想要做的事情的语法。

您可以将其包含在您的页面中：

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

这将引入库的1.x分支的最新缩小版本。

然后你需要一个选择。我打算说，让我们在前面使用

让我们使用选择，如果不正确，你可以改变它：

 <label for="meetingPlace">Meeting place: </label>  
   <select id="meetingPlace">
   <option>Please select</option>
   <option>Buckingham Palace</option>
   <option>The White House</option>
   <option>Mount Everest</option>
 </select>

有了这个，你需要勾选更改事件中的选择。您可以在JavaScript中执行此操作：

 $("#meetingPlace").on("change", function(){
 // This code will fire every time the user selects something
 })

所有这一切都是选择ID为＆＃34;＃meetingPlace＆＃34;并声明一个匿名函数，每当用户选择不同的东西时都应该运行该函数。

作为这篇文章的最后一步，让我们将JS输出用户选择的页面输出。

创建一个ID为＆＃34;结果＆＃34;：

的div

  <div id="results"></div>

然后在onchange回调中添加以下代码：

var selected = $(this).val();
$("#results").html("You selected: " + selected);

这样做是将所选选项元素的值赋给变量，然后相应地设置结果的innerHTML。

根据下拉选择JavaScript显示数据库中的相关数据

1 个答案: