如何使用jQuery在下拉列表中接收最终选择的项目

Question

我有一个表格，里面有几门课程，每门课程都有一个选择菜单来选择课程的持续时间。 在包含该表格的表单下面，我还有另一个表单，其文本区域名为“选定的课程和持续时间”，该区域会自动获取用户为其设置持续时间的课程名称（例如，课程A为1个月，课程B为3个月，等等。）。

我使用的方法的问题是，每次用户在选择第一个持续时间后改变主意，那么“ Selected Courses ...”（选择的课程...）表单字段就会显示同一课程的多个持续时间。 例如，如果用户首先从课程A的选择菜单中选择“ 1个月”，然后又改变了主意并从课程A的选择菜单中选择了“ 3个月”，则“所选课程和持续时间”窗体字段将为同一课程“课程A”提供两个条目：

所选课程和持续时间

路线A 1个月路线A 3个月

尽管我只希望在此表单字段中显示每个课程的最终选择值，所以无论用户改变主意多少次，“ Selected Courses ...”（选择课程...）表单字段始终仅获取最终选择的持续时间。

这是我用于第一种和第二种形式的HTML代码：

<form id="course-selector" onsubmit="return false;">
    <table class="table">
        <tbody>
            <tr class="course-a-heading">
                <th>Course Name</th>
                <th>Duration</th>
                <th>Price</th>
            </tr>
            <tr>
                <td class="course-name">Course A</td>
                <td class="duration">
                    <select name="course-a" id="course-a">
                        <option value="">None</option>                                                                          
                        <option value="35">1 Month</option>                                                                         
                        <option value="72">3 Months</option>                                                                            
                        <option value="125">6 Months</option>                                                                           
                        <option value="230">12 Months</option>                                                                          
                    </select>
                </td>
                <td class="total">SFr. <span id="courseatotal" data-format="SFr. 0,0[.]00" data-formula="$coursea"></span>.--</td>
            </tr>
            <tr>
                <td class="course-name">Course B</td>
                <td class="duration">
                    <select name="course-b" id="course-b">
                        <option value="">None</option>                                                                          
                        <option value="35">1 Month</option>                                                                         
                        <option value="72">3 Months</option>                                                                            
                        <option value="125">6 Months</option>                                                                           
                        <option value="230">12 Months</option>                                                                          
                    </select>
                </td>
                <td class="total">SFr. <span id="coursebtotal" data-format="SFr. 0,0[.]00" data-formula="$courseb"></span>.--</td>
            </tr>
        </tbody>
    </table>
</form>
<form method="post">
    <textarea name="vfb-132" id="vfb-132" class="vfb-textarea  vfb-medium   sel-courses" readonly="">No course selected</textarea>
</form>

这是jQuery代码，它在第二种形式的文本区域（＃vfb-132）中插入具有选定时长的课程：

var output = "";
$("select").on('change', function() {
    var rselect, duration;

    duration = $('option:selected', $(this)).text();
    rselect = $(this).closest('tr');

    rselect.find('.course-name').each(function(){
        output += $(this).html() + " for " + duration + "\n";

        $("#vfb-132").val(output);
    });
});

我试图搜索该网站以及Google和其他一些地方，但无法提出解决方案。 请帮忙！

非常感谢！

此致Avinash

Answer 1

我认为，这将有助于你DEMO

<form id="course-selector" onsubmit="return false;">
<table class="table">
<tbody>
  <tr class="course-a-heading">
    <th>Course Name</th>
    <th>Duration</th>
    <th>Price</th>
  </tr>

  <tr>
                <td id="course-name-A">Course A</td>
                <td class="duration">
                    <select name="course-a" id="course-a">
                        <option value="">None</option>                                                                          
                        <option value="35">1 Month</option>                                                                         
                        <option value="72">3 Months</option>                                                                            
                        <option value="125">6 Months</option>                                                                           
                        <option value="230">12 Months</option>                                                                          
                    </select>
                </td>
                <td class="total">SFr. <span id="courseatotal" data-format="SFr. 0,0[.]00" data-formula="$coursea"></span>.--</td>
        </tr>
     <tr>
                <td id="course-name-B">Course B</td>
                <td class="duration">
                    <select name="course-a" id="course-B">
                        <option value="">None</option>                                                                          
                        <option value="35">1 Month</option>                                                                         
                        <option value="72">3 Months</option>                                                                            
                        <option value="125">6 Months</option>                                                                           
                        <option value="230">12 Months</option>                                                                          
                    </select>
                </td>
                <td class="total">SFr. <span id="courseatotal" data-format="SFr. 0,0[.]00" data-formula="$coursea"></span>.--</td>
        </tr>
</tbody>
</table>
</form>


<form method="post">
<textarea name="vfb-132" id="vfb-132" class="vfb-textarea  vfb-medium   sel-courses" readonly="">No course selected</textarea>
</form>

js

  $(document).ready(function(){
        $('#course-a,#course-B').on('change', function(){
            $('#vfb-132').val();

            var courseNameA = $('#course-name-A').text();
            var durationA = $('#course-a').find('option:selected').text();
            var outputcourseA = courseNameA +' FOR '+ durationA + ',';
            if(durationA == 'None'){
                outputcourseA = "";
            }
             var courseNameB = $('#course-name-B').text();
            var durationB = $('#course-B').find('option:selected').text();
             var outputcourseB = courseNameB +' FOR '+ durationB + ',';
            if(durationB == 'None'){
                outputcourseB = '';
            }
            $('#vfb-132').val(outputcourseA + outputcourseB );
            if($('#vfb-132').val() == ""){
               $('#vfb-132').val('No course selected'); 
            }
        });

    });

Answer 2

令人着迷的问题。 我在您的.find函数中添加了以下内容：

var courseName = $(this).html();
var exists = output.indexOf(courseName) > -1;
if (exists)
{
    var pattern = courseName + " .*\n";
    pattern = new RegExp(pattern);
    var arr = output.split(output.match(pattern));
    arr[arr.indexOf("")] = courseName + " for " + duration + "\n";
    output = arr.join("");
    $("#vfb-132").val(output);
    return;
}

这是一个JSFiddle 。 干杯!

编辑：

如果所有项目的名称都不会唯一，那么最好的解决方案可能就是不要使正则表达式匹配。 相反，每次更改选项时，只需重构整个文本即可，如下所示：

$("select").on('change', function() {
    var output = "";
    $('.duration').each(function() {
        var duration = $('option:selected', $(this)).text();
        if (duration.trim() == "None") return;

        var courseName = $(this).prev().html();
        output += courseName + " for " + duration + "\n";
    });
    $("#vfb-132").val(output);
});

无论如何，这是更短的代码，并且更不容易出错。 这里有一个FIDDLE它。

Answer 3

var output = "";
        $("#course-a").on('change', function () {
            var rselect, duration;
            $("#vfb-132").val("");
            output = "";
            duration = "";
            duration = $('option:selected', $(this)).text();
            rselect = $(this).closest('tr');
            rselect.find('.course-name').each(function () {
                output += $(this).html() + " for " + duration + "\n";
                if ($("#course-b").val() != '0') {
                    output += $(this).html() + " for " + $("#course-b").find("option:selected").text() + "\n";
                }
                $("#vfb-132").val(output);
            });
        });

        $("#course-b").on('change', function () {
            var rselect, duration;
            output = "";
            duration = "";
            $("#vfb-132").val("");
            duration = $('option:selected', $(this)).text();
            rselect = $(this).closest('tr');
            rselect.find('.course-name').each(function () {
                if ($("#course-a").val() != '0') {
                    output += $(this).html() + " for " + $("#course-a").find("option:selected").text() + "\n";
                }
                output += $(this).html() + " for " + duration + "\n";

                $("#vfb-132").val(output);
            });
        });

在这里摆弄