可以输入的select下拉选择框

本文由清尘发表于2013-12-08 14:09最后修改于2015-12-08属于jQuery分类

HTML部分:

<table>
	<tr>
	<td>退回物流公司:
    <span class="inputSelect_op">
      <select>
        <option>请选择</option>
        <option>顺丰快递</option>
        <option>圆通快递</option>
        <option>邮政EMS</option>
        <option>平邮</option>
      </select>
    </span>
    <span class="inputSelect_input">
      <input type="text" value="">
    </span>
    </td>
	</tr>
</table>


CSS:

.inputSelect_op,.inputSelect_input{position: absolute; width: 120px;}
.inputSelect_op select{width: 140px; background-color: #fff; border:1px solid #ccc;}
.inputSelect_input input{border:0 none; width: 118px; margin-left: 2px; height: 18px; line-height: 18px;}

JS部分:

  //可以输入的下拉选择框
var inputSelect_op = $('.inputSelect_op').find('select'); 
inputSelect_op.each(function(){
    $(this).bind('change',function(){
      var inputSelect_input = $(this).parent('.inputSelect_op').siblings('.inputSelect_input').find(' input');
      var op = $(this).val();
        inputSelect_input.val(op);
    })
})