Question

我正在尝试获取用户输入的值并将其添加到列表中。我需要检查我的列表，看看它是否存在。我在第一步失败了，如何将值添加到列表中？

这是我的代码：

HTML：

<form action="">
    <div class="device_item">
        <label for="dev_name">Device Name</label>
        <input id="dev_name" type="text">
    </div>
    <div class="device_item">
        <label for="dev_name">Device Type</label>
        <input id="dev_type" type="text">
    </div>
    <div class="device_item">
        <label for="dev_os">Device OS</label>
        <input id="dev_os" type="text">
    </div>
    <div class="device_item">
        <div class="device_info">
            <div class="device_info_header">
                <label>Device Information Header</label>
                <div>
                    <select multiple="multiple" id="lstBox1" name="device_info_header">
                        <option value="net_info">Network Info</option>
                        <option value="os_info">OS Info</option>
                        <option value="drive_info">Drive Info</option>
                        <option value="time_dif">Time Difference Info</option>
                    </select>
                </div>
                <div id="arrows">
                    <input type='button' class="delete" value='  <  ' />
                    <input type='button' class='add' value='  >  ' />
                </div>
                <div>
                    <select multiple="multiple" id="lstBox2" name="device_info_header"></select>
                </div>
                <input type="text" name="other_info" id="dev_info_other_text" style="display:none;">
                <div class="clear_both" />
                <div class="other_ops">Other:
                    <input id="other_field" type="text" />
                    <input type="button" class="add2" value='  >  ' />
                </div>
                <br>
                <br>NEXT BUTTON (creates headers or dictionary keys) TAKES YOU TO:
                <br>
                <br>TITLE (eg. Net Info, or OS Info)
                <br>Key:
                <input type="text">
                <br>Value:
                <input type="text">
                <br>Add more button
                <br>
                <br>next button (loop through the headers/keys).
                <br>
                <br>finally, a submit button</div>
        </div>
    </div>
</form>

JS

$(document).ready(function () {

    $('.add').click(function (e) {
        var selectedOpts = $('#lstBox1 option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }

        $('#lstBox2').append($(selectedOpts).clone());
        e.preventDefault();
    });

    $('.delete').click(function (e) {
        var selectedOpts = $('#lstBox2 option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }

        $(selectedOpts).remove();
        e.preventDefault();
    });
    $('.add2').click(function (e) {
        var other_field_str = $('#other_field').val();
        alert(other_field_str);
        $('#lstBox2').append(other_field_str);
        e.preventDefault();
    });
});

我也有关于这个小提琴的代码：http://jsfiddle.net/jdell64/8qsda/1/

完整解决方案的更新后的提问：http://jsfiddle.net/jdell64/8qsda/

Answer 1

您需要创建一个包含<option>输入的Other元素。

   $('.add2').click(function (e) {
        var other_field_str = $('#other_field').val();
        alert(other_field_str);
        var other_field = $('<option>', {
            value: other_field_str,
            text: other_field_str
        });
        $('#lstBox2').append(other_field);
        e.preventDefault();
    });

FIDDLE

如何将文本字段添加到多列表 - jQuery？

1 个答案: