Создать тег выбора из строки разделения

Question

Как мне разбить эту строку:

waterfowl||tvs||guitar||pillow||mouse

... на ||?

Затем я хотел бы создать список выбора, подобный этому:

<select name="options" id="options">
  <option value="waterfowl">waterfowl</option>
  <option value="tvs">tvs</option>
  <option value="guitar">guitar</option>
  <option value="pillow">pillow</option>
  <option value="mouse">mouse</option>
</select>

Answer 1

var options = 'waterfowl||tvs||guitar||pillow||mouse';

$( '#someDiv' ).html( '<select name="options" id="options">'
    + options.replace(/(\w+)\|*/g, '<option value="$1">$1</option>')
    + '</select>' );

Answer 2

// Turns a string in to a combo box based on:
// @d      Delimiter to split the string up by
// @so     Select box attributes (adding name="foo" means passing {name:'foo'})
// Result: jQuery object of the new select element, populated with the items
//         from the string
String.prototype.toSelect = function(d,so){
    so = so || {};

    var s = $('<select/>',so),
        items = this.split(d);
    for (var i = 0; i < items.length; i++){
        $('<option/>').val(items[i]).text(items[i]).appendTo(s);
    }
    return s;
}

// an example
// Append the following string to the body of the document
// after it's been converted in to  a <Select> element
$('body').append("waterfowl||tvs||guitar||pillow||mouse".toSelect('||',{
    name: 'select',
    id: 'select'
}));

Версия с немного большей гибкостью (и возможностями jQuery): http://jsfiddle.net/j6DjR/

Answer 3

Преамбула:

Я использовал элемент <select> с id и name атрибутами «ассорти»."options" - это ужасный идентификатор / имя для элемента формы.Подробнее здесь: http://www.fortybelow.ca/hosted/comp-lang-javascript/faq/names/

---

Код:

Без беспорядка, без суеты.

(commonElements.testing - это форма, содержащая элемент <select>)

var commonElements =
{
    "testing": document.getElementById("testing"),
    "assorted": document.getElementById("assorted")
},
options = "waterfowl||tvs||guitar||pillow||mouse";

function addOptions (optionList)
{
    var i = 0,
    limit = optionList.length,
    parent = commonElements.assorted,
    option;
    for (i;i<limit;i++)
    {
        option = document.createElement(
            "option"
        );
        option.text = optionList[i];
        option.value = optionList[i];
        parent.add(option, null);
    }
}

function createOptions (toSplit)
{
    var optionList = toSplit.split("||");
    addOptions(optionList);
}

createOptions(options);

Рабочая ссылка (с полным кодом):

http://jsbin.com/ucajep

Answer 4

Попробуйте следующее:

var input = 'waterfowl||tvs||guitar||pillow||mouse';
var split = input.split('||');
var select = $('<select name="options" id="options"></select>');
$.each(split, function(index, value) {
  var option = $('<option></option>');
  option.attr('value', value);
  option.text(value);
  select.append(option);
});
$('#idOfContainer').empty().append(select);

Answer 5

Ваша проблема проста:

1. Разделить строку, используя || в качестве разделителя.
2. Зацикливание на разделенной строке.
   1. Создать новый option элемент
   2. Установить его значение и текст для текущего элемента
   3. Добавить элемент в содержащий select элемент

Вот простая реализация (без использования jQuery). Я использую Array.prototype.forEach и element.textContent (первый - ES5, а второй - не IE), но это должно донести эту мысль (и их не сложно подобрать).

function makeSelect( options, separator ) {
    var select = document.createElement( 'select' ),
        optionElem;

    options.split( separator || '||' ).forEach(function( item ) {

        optionElem = document.createElement( 'option' );

        optionElem.value =
            optionElem.textContent =
                item;

        select.appendChild( optionElem );
    });

    return select;
}

var selectElem = makeSelect( 'waterfowl||tvs||guitar||pillow||mouse' );

Затем вы можете манипулировать selectElem, как если бы вы манипулировали любым другим элементом DOM.

Answer 6

Вы можете разбить строку на массив, затем выполнить итерацию по массиву, создав строку HTML, которую вы можете затем добавить в DOM:

var str = 'waterfowl||tvs||guitar||pillow||mouse',//the string to be split
    arr = str.split('||'),//the split string, each split stored in an index of an array
    out = '';//our output buffer variable

//iterate through each array index
for (var index; index < arr.length; i++) {

    //add this index to the output buffer
    out += '<option value="' + arr[index] + '">' + arr[index] + '</option>';
}

//add the HTML we've built to the DOM, you can also use `.append(<code>)` instead of `.html(<code>)` but if you are using an ID for your select element then you ant to make sure and replace the HTML
$('#container-element').html('<select name="options" id="options">' + out + '</select>');

Вот jsfiddle для демонстрации: http://jsfiddle.net/jasper/eb5Dj/