Как вставить в массив из данных в?

Question

[Иван Гордиенко]

Есть поле ввода данных в админке WP.
Установлены custom_post_types. Для одного поля выбран вид "чекбокс", куда вбивается размер обуви. После чего он выводится в -

<li class="offer__info-listitem">Размер: <span><?php the_field('size'); ?></span><span><?php the_field('size_2'); ?></span></li>

Что выглядит на выходе как -

<li class="offer__info-listitem">Размер: <span>41, 42, 43, 44</span></li>

Требуется создать <sеlect>, в котором каждый тэг <оption> будет равен одному значению из <spаn> выше.

<select>
  <option>41</option>
  <option>42</option>
  <option>43</option>
  <option>44</option>
</select>

Как осуществить подобное?

UPDATE.
Варианты участников Выше - рабочие. В моем случае была выбрана другая структура и, соответственно, другое решение.

Вот так получался select для кастомного поля из админки WP.

<?php
            $values = get_field('size');
            if ($values) {
                echo '<select id="select" onchange="populateField(this);">';

                foreach ($values as $value) {
                    echo '<option value=' . $value . ' selected="selected">' . $value . '</option>';
                }
				echo '<option selected="selected">Выберите размер</option>';
                echo '</select>';
            }
        ?>

И вот так он забирался -

function populateField(ele) {
  $('#size').attr('data-size', $(ele).children("option:selected").text())
}

Comments

[FeST1VaL]

Заносите the_field('size'); в переменную и дальше разбивайте элементы на массив по ,

Answer 1

[Sashqa]

const arr = document.querySelector('span').innerText.split(',')
const select = document.getElementById('select');
arr.forEach(item => {
  const option = document.createElement('option');
  select.appendChild(option)
  option.setAttribute('value', item)
  option.innerText = item
})

Comments

[Иван Гордиенко]

function displayCart() {
    var cartArray = shoppingCart.listCart();
    var output = "" + "<div ><input class='input-send' name='phone' value='' placeholder='Номер телефона' requaired>" + "<input class='input-send' name='name' value='' placeholder='Ваша почта' requaired>" + "<button class='sendspan' type='submit'>Отправить заказ</button></div>";
    for (var i in cartArray) {
        output += "<div class='form-group'>"
            + "<img src=" + cartArray[i].name + ">"
            + "<div>" + cartArray[i].article + "</div>"
            + "<div>" + cartArray[i].price + "</div>"
            + "<select>" + cartArray[i].size + "</select>"
            + "<div class='input-group'><button class='minus-item input-group-addon' data-name=" + cartArray[i].name + ">-</button>"
            + "<input name='mutch' type='number' class='item-count form-control' data-name='" + cartArray[i].name + "' value='" + cartArray[i].count + "' requaired>"
            + "<button class='plus-item btn input-group-addon' data-name=" + cartArray[i].name + ">+</button></div>"
            + "<div name='price' requaired>" + cartArray[i].total + "</div>"
            + "<button class='delete-item btn btn-danger' data-name=" + cartArray[i].name + ">×</button>"
            + "<p class='form-message'></p>"
            + "<div id='message'></div>"
            + "</div>"
            + "<input class='offer' name='offer[]' value='Артикул: " + cartArray[i].article + " | Размер: " + cartArray[i].size + " | Количество: " + cartArray[i].count + " | Сумма: " + cartArray[i].total + "' requaired>"
            + "</div>";
    }

    $('.show-cart').html(output);
    $('.total-cart').html(shoppingCart.totalCart());
    $('.total-count').html(shoppingCart.totalCount());
}

Вот js отображения корзины. Как правильно интегрировать Вашу часть кода в мой?

[Иван Гордиенко]

+ "<select>" + cartArray[i].size + "</select>"

Собственно строка, где и должен отображаться данный выбор. Спасибо.

[Sashqa]

Слава Дроздов, вы разобрались?

[Иван Гордиенко]

Sashqa, доброго дня. В мое случае сработало подобное -

function populateField(ele) {
  $('#size').attr('data-size', $(ele).children("option:selected").text())
}

И от селекта я отошел. Был создан div, методом Выше, который, и заполнялся.

Answer 2

[WP Panda]

$vals = get_the_field( 'size' );
	$vals_args = explode( ',', preg_replace( '/\s+/', '', $vals ) );
	if ( !empty( $vals_args ) ) {
		$options = '';
		foreach ( $vals_args as $one_val ) {
			$options .= sprintf( '<option value="%1$s">%1$s</option>', $one_val );
		}

		printf( '<select name="blablabla">%s</select>', $options );
	}

Comments

[Иван Гордиенко]

function displayCart() {
    var cartArray = shoppingCart.listCart();
    var output = "" + "<div ><input class='input-send' name='phone' value='' placeholder='Номер телефона' requaired>" + "<input class='input-send' name='name' value='' placeholder='Ваша почта' requaired>" + "<button class='sendspan' type='submit'>Отправить заказ</button></div>";
    for (var i in cartArray) {
        output += "<div class='form-group'>"
            + "<img src=" + cartArray[i].name + ">"
            + "<div>" + cartArray[i].article + "</div>"
            + "<div>" + cartArray[i].price + "</div>"
            + "<select></select>"
            + "<div class='input-group'><button class='minus-item input-group-addon' data-name=" + cartArray[i].name + ">-</button>"
            + "<input name='mutch' type='number' class='item-count form-control' data-name='" + cartArray[i].name + "' value='" + cartArray[i].count + "' requaired>"
            + "<button class='plus-item btn input-group-addon' data-name=" + cartArray[i].name + ">+</button></div>"
            + "<div name='price' requaired>" + cartArray[i].total + "</div>"
            + "<button class='delete-item btn btn-danger' data-name=" + cartArray[i].name + ">×</button>"
            + "<p class='form-message'></p>"
            + "<div id='message'></div>"
            + "</div>"
            + "<input class='offer' name='offer[]' value='Артикул: " + cartArray[i].article + " | Размер: " + cartArray[i].size + " | Количество: " + cartArray[i].count + " | Сумма: " + cartArray[i].total + "' requaired>"
            + "</div>";
    }

    $('.show-cart').html(output);
    $('.total-cart').html(shoppingCart.totalCart());
    $('.total-count').html(shoppingCart.totalCount());
}

Вот так идет вывод моей корзины, где + "<select></select>" нужно реализовать. Ваши условия и код интегрируются на страницу, где конкретно Выводится данная корзина?