javascript - jquery 获取自动编号的输入值并从中创建选择框

Question

这是一个更大项目的一部分，但希望在这里保持简单，所以我创建了一个具有良好起始位置的 fiddle :http://jsfiddle.net/F7aKG/214/

我们得到了一个 html 表单，其中包含数百个输入，我们只需要从其中的几个输入中获取值即可创建选择框。所以我们无法将所有输入都输入到表单中。

假设我们有这段代码

<input id="jform_params__characters__characters0__character_name" value="first"><br>
<input id="jform_params__characters__characters1__character_name" value="second"><br>
<input id="jform_params__characters__characters2__character_name" value="third"><br>
<input id="jform_params__characters__characters3__character_name" value="fourth"><br>
<input id="jform_params__characters__characters4__character_name" value="fifth"><br>
<button>submit</button>

通常情况下，这些值不会在表单中设置，但现在就这样做了，因为每次我想测试表单时都需要填写它。正如您所看到的，唯一改变的是 id 中的数字。

到目前为止，为了测试抓取我得到的值:

$(function(){
    $('button').click(function(){
        var values = $( "input[id^='jform_params__characters__characters']" ).map( function(){return $(this).val(); }).get();
        alert(values);
    });
});

问题

现在，单击警报时会显示第一、第二、第三、第四、第五，现在我如何将其更改为选择框的选项。

我很感激我能得到的任何提示，但如果你愿意，那么我很想有一个完整的代码示例。如果上面的 fiddle 可以用一个有效的选择框来改变，那就太好了。

感谢大家的阅读和帮助。

Answer 1

jsfiddle

$(function(){
    $('button').click(function(){
        var values = $( "input[id^='jform_params__characters__characters']" ).map( function(){return $(this).val(); }).get();
        var optionsPlaceholder = '###OPTIONS###';
        var optionPlaceholder = '###OPTION###';
        var select = '<select>' + optionsPlaceholder + '</select>';
        var option = '<option>' + optionPlaceholder + '</option>';
        var options = '';

        for (var i = 0; i < values.length; i++) {
            var currentOption = option.replace(optionPlaceholder, values[i]);
            options += currentOption;
        }

        var selectBox = select.replace(optionsPlaceholder, options);
        var $select = $(selectBox);
        $('#selectBox').html($select);
        alert(values);
    });
});