Получение значение select (text, value)

142

25 июля 2017, 19:32

Здравствуйте! Есть код. Нужно получить значение у option(именно text и value):

<form id="myForm">
<?foreach ($q as $value) {
?>
<input placeholder="text">
<select id="select1">
<? foreach ($url as $value1) {?>
    <option value="<?=$value1['seo_url']?>"><?=$value1['name']?>
  </option>
  <? } ?>
 </select>
 <? } ?>
</form>
<button class="save" type="button">Сохранить</button>

Получаю значение с помощью Jquery:

$('.save').on('click', function(){
 var result = [];
$('#myForm input').each(function () {
  result.push({
    input: $(this).val(), //нормально получаю значение `input`
    select: $('+ select', this).val(), //нормально получаю значение `select`
    select1: $("#select1 option:selected").text() // Получаю либо значение только первого селекта, которое потом дублируется во всех селектах, либо еще что-то непонятное
  })
 })
console.log(result);
});

Как мне нормально получить значение value и text у select?

Answer 1

Напомню, что что на странице должен быть только один объект с уникальным id, а у тебя в цикле их несколько отображается. В итоге jquery тихо офигевает и не может понять какой из $("#select1 ему нужно взять. На будущее, если нужно сгруппировать множество элементов по признаку - используй классы.

А выбрать выбранный элемент у текущего элемента в цикле поможет find('option:selected'):

var result = []; 
 
$('#myForm input').each(function () {	 
  var select = $('+ select', this); 
   
  result.push({ 
    input: $(this).val(), 
    select: select.val(), 
    selected:  select.find('option:selected').text()  
  }) 
}); 
 
console.log(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form id="myForm"> 
 
  <input placeholder="text"> 
  <select class="select1"> 
    <option value="yo111" selected>111</option> 
    <option value="yo222">222</option> 
    <option value="yo333">333</option> 
 </select> 
 
<input placeholder="text"> 
  <select class="select1"> 
    <option value="yo1">1</option> 
    <option value="yo2">2</option> 
    <option value="yo3" selected>3</option> 
 </select> 
  
 <input placeholder="text"> 
  <select class="select1"> 
    <option value="yo11">11</option> 
    <option value="yo22" selected>22</option> 
    <option value="yo33">33</option> 
 </select> 
</form> 
 
<button class="save" type="button">Сохранить</button>

Answer 2

да что так в jq вдарились вот на js аналог

function save(){ 
  var result =[]; 
  document.querySelectorAll('#myForm div').forEach( item => {	 
    var select = item.querySelector('select'); 
    var input = item.querySelector('input'); 
 
    result.push( { 
    select: select.value, 
    selectText: select.options[select.selectedIndex].text, 
    input: input.value 
    }); 
  }); 
 
  console.log(result); 
} 
 
document.querySelector('button.save').onclick = save;

<form id="myForm"> 
<div> 
  <input placeholder="text"> 
  <select class="select1"> 
    <option value="yo111" selected>111</option> 
    <option value="yo222">222</option> 
    <option value="yo333">333</option> 
 </select> 
</div> 
<div> 
<input placeholder="text"> 
  <select class="select1"> 
    <option value="yo1">1</option> 
    <option value="yo2">2</option> 
    <option value="yo3" selected>3</option> 
 </select> 
</div> 
<div> 
 <input placeholder="text"> 
  <select class="select1"> 
    <option value="yo11">11</option> 
    <option value="yo22" selected>22</option> 
    <option value="yo33">33</option> 
 </select> 
</div> 
</form> 
 
<button class="save" type="button">Сохранить</button>

Создание эксклюзивного проекта в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Можно ли вставить видео в SFML?

Можно ли вставлять видео в SFML, если да, то как? Если нетрудно, то кодом или ссылкуВ документации SFML не могу найти, хотя, возможно, я просто плохо...

296

c++

BitBlt - более быстрый аналог

Реализую запись видео с экранаТребуемый fps - не ниже 50

269

c++

Как “правильнее” работать с QMap C++

Как лучше писать так:

199

c++

class Point c++

Существует ли класс или структура Point (точка) в stl или её аналог?

251