问题

Question

这是一个更大的项目的一部分，但是想在这里保持简单，所以我创造了一个有良好开端的小提琴：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);
    });
});

问题

现在点击警报时，我会first,second,third,fourth,fifth现在如何将其更改为选择框的选项。

我很感激我能得到的任何提示，但如果你愿意，那么我很乐意有一个完整的代码示例。如果使用工作选择框可以改变上面的小提琴，那将是绝对好的。

感谢大家的阅读和帮助。

Answer 1

如果你想要创建一个select元素，请尝试以下方法。

$(function(){
    $('button').click(function(){
        var values = $( "input[id^='jform_params__characters__characters']" ).map( function(){return $(this).val(); }).get();
        //alert(values);
        $("button").after("<select></select>");
         $.each(values, function (x, y) {$("select").append("<option>" + y + "</option>");});
    });
});

Answer 2

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);
    });
});

Answer 3

您可以使用地图功能并添加选项标签，而不仅仅是将其附加到选择。

＆＃13;

var inps = $("input[id^='jform_params__characters__characters']");
var opts = inps.map(function() {
  return "<option>" + $(this).val() + "</option>";
}).get();
$("<select/>").append(opts).insertBefore(inps.eq(0));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

＆＃13;

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

问题

3 个答案: