Question

我正在尝试编写一个Web表单，该表单将根据之前在表单中输入的用户提供可选择的选项。

我被卡住了;

我有一个桌子类型，它只是带有输入标签的td标签（type = text）。这些是由用户填写的，所以我不知道它们是什么..
我有一个按钮可以为这个表添加额外的行（Jquery添加另一个td标签和输入标签）
用户根据需要添加任意数量的行

表单的下一部分是填写会议室，并选择每个会议室的类型。表格布局是相同的（除了有两列，而不是一列），并通过另一个按钮与Jquery添加额外的行。

我希望能够做的是添加新行以在表中包含两列。一个输入文本字段，另一个是选择框，其中包含从上表中选择的选项。

我已经设法让这个工作到了一定程度。但是，由于用户可能会返回从原始（房间类型）表中编辑选项，我需要使用选择框根据原始表当前所说的内容调整其值。

每次访问其中一个输入字段时，我可以通过清空和重新填充我的选择框来实现这一点（使用OnBlur，这可能不是最有效的方法），但是因为它从bx中删除了条目，然后重新填充，已经填充的任何选择框都已重置。我只想要重置无效选项（即原始表中不存在的值）。

我一直在寻找/玩这个很长一段时间，但我的编程能力只是我从这里和谷歌教过的，同时在几个非常小的东西之前搞乱......

我的HTML代码（好吧，我的代码的一部分，我删除了所有不相关的代码以保持简单）在这里：

<div id="rm_types_info">
    <table id="room_types_table">
        <tr>
            <td><input type="text" class="room_types" onblur="edit_rooms_select();" /></td>
        </tr>
    </table>

    <button type="button" onclick="rmtypes('room_types_table');">Add Another Room Type</button>
</div>

<div id="rooms_info">
    <table id="rooms_table">
        <tr>
            <th>Room Number</th>
            <th>Room Type</th>
        </tr>
        <tr>
            <td><input type="text" /></td>
            <td>
                <select class="room_type_select">
                    <option value="Please Choose">Please Choose</option>
                </select>
            </td>
        </tr>
    </table>

    <button type="button" onclick="rooms('rooms_table');">Add Another Room</button>
</div>

我的JQuery是;

<script>
    var userscounter=2
    var rmtypescounter=1
    var roomscounter=2

    function users(ID){
        document.getElementById(ID).insertRow(userscounter).innerHTML = '<td><input type="text" /></td><td><input type="text" /></td>';
        userscounter++;
    };

    function rmtypes(ID){
        document.getElementById(ID).insertRow(rmtypescounter).innerHTML = '<td><input type="text" class="room_types" onblur="edit_rooms_select();" /></td>';
        rmtypescounter++;
    }

    function rooms(ID){
        document.getElementById(ID).insertRow(roomscounter).innerHTML = '<td><input type="text" /></td><select class="room_type_select"><option value="Please Choose">Please Choose</option></select></td>';
        roomscounter++;
    };


    function edit_rooms_select(){   
        var roomtypelist = $('.room_type_select');
        roomtypelist.empty()
        $('#room_types_table tr td input').each(function(){
            var text = $(this).val();
            roomtypelist.append('<option value='+text+'>'+text+'</option>');
        });
    }
</script>

我删除了删除重复项的Jquery，因为它肯定无法正常工作...

我知道我可能会以完全错误的方式解决这个问题，如果使用td标签或输入等完全错误，我很乐意改变整个表格。

Answer 1

我确信这不是做我需要的最有效的方法，但这就是我设法让它发挥作用的方式......

我的HTML ...

<div id="rm_types_info">
    <table id="room_types_table">
        <tr>
            <td><input type="text" name="2" class="room_types" onblur="edit_rooms_select();" /></td>
        </tr>
    </table>

    <button type="button" onclick="rmtypes('room_types_table');">Add Another Room Type</button>
</div>

<div id="rooms_info">
    <table id="rooms_table">
        <tr>
            <th>Room Number</th>
            <th>Room Type</th>
        </tr>
        <tr>
            <td><input type="text" /></td>
            <td>
                <select class="room_type_select" id="room_type_select1" >
                    <option value="1">Please Choose</option>
                </select>
            </td>
        </tr>
    </table>

    <button type="button" onclick="rooms('rooms_table');edit_rooms_select();">Add Another Room</button>
</div>

与JQuery脚本相关。特别是，它是最终的功能“edit_rooms_select（）”，特别是“我为之奋斗的每个选择添加新选项”。

<script>
    var rmtypescount=3;
    var room_type_select_count=2;

    function rmtypes(){
        $('#room_types_table tr:last').after('<tr><td><input type="text" name='+rmtypescount+' class="room_types" onblur="edit_rooms_select();" /></td></tr>');
        rmtypescount++;
    };

    function rooms(){
        $('#rooms_table tr:last').after('<tr><td><input type="text" /></td><td><select id="room_type_select'+room_type_select_count+'" class="room_type_select"><option value="1">Please Choose</option></select></td></tr>');
        room_type_select_count++
    };

    function edit_rooms_select(){       
        $('#room_types_table tr td input').each(function(){
            var name = $(this).attr('name');
            var value = $(this).val();
//Add New Options to each select            
            $('#rooms_table select').each(function(){
                var last = $(this).children('option:last').val();
                if (name > last) {
                    $(this).append('<option value="'+name+'">'+value+'</option>');
                };
            });
//Change any room types that have been edited           
            $('.room_type_select option').each(function(){
                var match = $(this).val();
                if(name == match){
                    $(this).text(value)
                };
            });
//Remove Blank Entries
            if(value == ''){
                $('.room_type_select option[value='+name+']').remove();
            };
        });
    };
</script>

我认为edit_rooms_select功能比它需要的要昂贵得多。根据我的要求，这不会成为问题，但我会非常有兴趣看看其他人如何根据我的要求编辑列表。 - room_types_table中的所有用户输入必须是rooms_table中选择框中的选项 - room_types_table中更改的任何输入必须在选择框中更改为匹配相关选项 - 必须从选择框中删除从room_types_table留空（或稍后删除）的任何输入 - 任何具有从room_types_table中删除的选择的选择框必须重置回其原始的“请选择”选项。

如果有人可以提出更好的方法来做到这一点，或者可以以任何方式整理我的代码，我希望看到代码，并且还要解释，因为我对Javascript / Jquery缺乏经验。

从选择框中删除重复项而非有效条目，但不刷新整个框

1 个答案: