입력 상자와 드롭다운 상자 간의 연결 실현

亚连
풀어 주다: 2018-06-09 17:53:55
원래의
3120명이 탐색했습니다.

이제 입력 상자의 실시간 모니터링 및 입력 상자와 드롭다운 상자 간의 연결에 대한 예를 공유하겠습니다. 좋은 참고 값이 있어 모든 분들께 도움이 되기를 바랍니다.

그림과 같이:

html code

<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[&#39;material_id&#39;]}">{$value[&#39;material_name&#39;]}</option>
   {/foreach}
  </select>
 </td>
</tr>
로그인 후 복사

JQuery code

<script type="text/javascript">
 $(&#39;#reward&#39;).bind(&#39;input propertychange&#39;, 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=&#39;"+key+"&#39;>"+obj[key]+"</option>"; 
      reward_id.append(option); 
     }
     } 
   } 
 });
 } 
</script>
로그인 후 복사

PHP code

public function add_alms()
{
 $reward = $this->materials->selReward();
 $this->assign(&#39;reward&#39;,$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 화살표 함수에 대해 질문이 있으신가요?

vue에서 echarts3.0 적응형을 사용하는 방법은 무엇입니까?

스와이프에서 동적 로딩 데이터 슬라이딩 오류 문제를 해결하는 방법은 무엇입니까?

위 내용은 입력 상자와 드롭다운 상자 간의 연결 실현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿