最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
当前位置: 首页 - 科技 - 知识百科 - 正文

实现输入框与下拉框联动

来源:懂视网 责编:小OO 时间:2020-11-27 19:38:51
文档

实现输入框与下拉框联动

如图。html代码;<;tr>;<;th scope=";row";>;奖励类型:<;/th>;<;td>;<;input value=";";type=";text";name=";item";id=";reward";style=";width: 60px;height: 20px;";placeholder=";输入关键字";/>;<;select name=";reward_id";id=";reward_id";>;<;option value=";>。
推荐度:
导读如图。html代码;<;tr>;<;th scope=";row";>;奖励类型:<;/th>;<;td>;<;input value=";";type=";text";name=";item";id=";reward";style=";width: 60px;height: 20px;";placeholder=";输入关键字";/>;<;select name=";reward_id";id=";reward_id";>;<;option value=";>。
下面我就为大家分享一篇实时监控input框,实现输入框与下拉框联动的实例,具有很好的参考价值,希望对大家有所帮助。

如图:

html代码

<tr>
 <th scope="row">奖励类型:</th>
 <td><input value="" type="text" name="item" id="reward" style="width: 60px;height: 20px;" placeholder="输入关键字" />
 <select name="reward_id" id="reward_id"> 
 <option value="">---请选择---</option>
 {foreach $reward as $value}
 <option value="{$value['material_id']}">{$value['material_name']}</option>
 {/foreach}
 </select>
 </td>
</tr>

JQuery代码

<script type="text/javascript">
 $('#reward').bind('input propertychange', function() {reward();});
 function reward()
 {
 var search = $("#reward").val();
 $.ajax({ 
 type:"get", 
 url:"/mall/config_commodity_info/search_commodity_info", 
 data:{search:search}, 
 success:function(select){ 
 var reward_id = $("#reward_id"); 
 if (select) {
 $("option",reward_id).remove();
 var obj = JSON.parse(select);
 for (var key in obj) {
 var option = "<option value='"+key+"'>"+obj[key]+"</option>"; 
 reward_id.append(option); 
 }
 } 
 } 
 });
 } 
</script>

PHP代码

public function add_alms()
{
 $reward = $this->materials->selReward();
 $this->assign('reward',$reward);
 return $this->fetch();
}
public function do_add_alms()
{
 $data = Request::instance()->param();
 $this->alms->addAlms($data);
}

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在Vue2.5中通过json文件读取数据的方法

在vue2.5.2中使用http请求如何获取静态json数据

在jQuery幻灯片中使用插件owlcarousel(详细教程)

在ES6箭头函数中有关this方面的问题?

在vue中使用echarts3.0自适应的方法有哪些?

在swiper中如何解决动态加载数据滑动失效的问题?

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文档

实现输入框与下拉框联动

如图。html代码;<;tr>;<;th scope=";row";>;奖励类型:<;/th>;<;td>;<;input value=";";type=";text";name=";item";id=";reward";style=";width: 60px;height: 20px;";placeholder=";输入关键字";/>;<;select name=";reward_id";id=";reward_id";>;<;option value=";>。
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top