Question

我有几个输入和选项，我想用一个方法来处理。我的输入表单定义为：

<div class="tab-content">
    <div class="tab-pane fade in active" id="Layout">
        <br>
        <p>Please enter the physical layout</p>
        <form class="form-inline" role="form">
            <div class="form-group">
                <label>Width</label>
                <input class="form-control" id="width" value ="1">
            </div>
            <div class="form-group">
                <label>Height</label>
                <input class="form-control" id="height" value="1">
            </div>
            <div class="form-group">
                <select class="form-control" id="unit">
                    <option>Panels</option>
                    <option>Metres</option>
                </select>

            </div>
            <div class="form-group">
                <label>Rigging</label>
                <select class="form-control" id="rigging">
                    <option>Flown</option>
                    <option>Ground Stack</option>
                    <option>None</option>
                </select>

                </div>
            </form>
        </div>
    <div class="tab-pane fade" id="Power">
        <br>
        <p>Please enter the power supply</p>
        <form class="form-inline" role="form">
            <div class="form-group">
                <select class="form-control" id="amps">
                    <option>13A</option>
                    <option>16A</option>
                    <option>32A</option>
                    <option>63A</option>
                    <option>125A</option>
                </select>

            </div>
            <div class="form-group">
                <select class="form-control" id="phase">
                    <option>Single Phase</option>
                    <option>Three Phase</option>
                </select>

            </div>
        </form>
    </div>
    <div class="tab-pane fade" id="Video">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

然后我尝试使用以下内容来选择已更改的内容：

/* get form changes */
$('.form-group').change(function(){
   switch($(this).attr("id")){
    case "width":
       alert("Width has changed");
       break;

   case "height":
        alert("Height has changd");
        break;

    case "unit":
           alert("Unit has changed");
           break;
   }
});

Answer 1

使用this关键字

$('.form-group').find('input').change(function () {
    // When the input value get changed the below code will be executed
    console.log(this.id);
    // Based on it add your switch statement
});

Answer 2

将您的活动应用于表单控件类，因为您输入并选择字段（因此您不必使用输入选择器）。

 /* get form changes */
    $('.form-control').change(function(){
       switch($(this).attr("id")){
         case "width":
            alert("Width has changed");
         break;

         case "height":
           alert("Height has changd");
         break;

         case "unit":
           alert("Unit has changed");
         break;
       }
      });

Answer 3

确保SELECT上的ID在案例中是相同的，并且我将这个$（＆＃39; .form-group select＆＃39;）变为现实。

$('.form-group select').change(function(){
   switch($(this).attr("id")){
    case "rigging":
       alert("Width has changed");
       break;

   case "power":
        alert("Height has changd");
        break;

    case "phase":
           alert("Unit has changed");
           break;
   }
});

http://jsfiddle.net/cvhd0dny/

Answer 4

选择选项需要更改为

$(document).ready(function() {
    $('.form-group').find('input').change(function() {
        switch ($(this).attr('id')) {
            case "width":
                console.log('Width chaged');
                break;

            case "height":
                 console.log("Height changed");
                break;

            case "unit":
                 console.log("Unit changed");
                break;

        }
    });
});

在课堂上查找更改时获取输入的ID

4 个答案: