Question

我有一个工作的jQuery函数，它使用.click（函数同时用同一页面上隐藏div元素的数据填充多个输入文本字段。只有几个字段很好但是现在它已经扩展并且有杂乱

我认为我可以通过使用表单选择下拉列表来触发现有功能并隐藏当前按钮来减少混乱，但我不知道如何实现这一点，所以我寻求帮助。

这是我的代码。下拉选择不执行任何操作。就在那里展示我的理念。

jQuery(document).ready(function($) {
 $('#cardformats li').click(function () {
  var curRowId = $(this).attr("id");
  $('#cardhead').val( $('#' + curRowId + ' div.cardhead').text() );
  $('#cardbody').val( $('#' + curRowId + ' div.cardbody').text() );
  $('#cardfoot').val( $('#' + curRowId + ' div.cardfoot').text() );
 });
 });


<form>
<select id="grabber" name="grab">
    <option value="card1">Card Format 1</option>
    <option value="card2">Card Format 2</option>
    <option value="card3">Card Format 3</option>
</select>
    <ul id="cardformats">
        <li id="row1">Card Format 1
            <div class="cardhead">Busines Name</div>
            <div class="cardbody">Address</div>
            <div class="cardfoot">Phone and Name</div>
        </li>
        <li id="row2">Card Format 2
            <div class="cardhead">Address and Phone</div>
            <div class="cardbody">Business Name</div>
            <div class="cardfoot">Name and Website</div>
        </li>
        <li id="row3">Card Format 3
            <div class="cardhead">Name</div>
             <div class="cardbody">Busines Name</div>
            <div class="cardfoot">Website and Phone</div>
        </li>
    </ul>

    <ul class="inputs">
        <li><label>Card Head</label>
            <input size="50" id="cardhead" type="text"></li>
        <li><label>Card Body</label>
             <input size="50" id="cardbody" type="text"></li>
        <li><label>Card Foot</label>
            <input size="50" id="cardfoot" type="text"></li>
    </ul>
</form>

Answer 1

这是您的解决方案，只需对现有代码进行最少的更改。

我使用li

value

dropdown

下拉列表中的书面变更处理程序

注意：可能会为您的案例提供优化的解决方案

在选择框上写改变处理程序：

  $("#grabber").change(function(){
     //code
    });

演示链接：http://jsfiddle.net/BuxsF/

如何使用表单选择选项触发现有的jquery函数

1 个答案: