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

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

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

1. 我将li id 更改为value of dropdown

2. 下拉菜单中的书面更改处理程序

注意：可能有适合您情况的优化解决方案

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

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

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