Question

我有一个下拉列表，其中包含一些从数据库表中检索到的值，我想要的是，当单击按钮时，它应该只获取选项标签的中间值，而仅获取类名称为“ get_this”的那些选项标签并离开如果他们没有此类，则选择

预期输出：值1 价值3 值4

<!DOCTYPE html>
<html>
<body>

<select  id="selectBox">
  <option class="get_this">text1   value 1    text1 </option>
  <option >text2   value 2    text2</option>
  <option class="get_this">text3   value 3    text3</option>
  <option class="get_this">text4   value 4    text4</option>
</select>

  <input type="submit" value="Get all options" class="get_options"/>

  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script>
  var array_values = [];
  $(".get_options").click( function (){

  var values = $.map($('#selectBox option'), function(ele) {

   array_values.push(ele.value);
});

  console.log(array_values);
  });

  </script>
</body>
</html>

Answer 1

当<option>标签的值需要与其文本内容不同时，您可能需要指定一个value属性。

<!DOCTYPE html>
<html>
<body>

<select  id="selectBox">
  <option class="get_this" value="value 1">text1   value 1    text1 </option>
  <option value="value 2">text2   value 2    text2</option>
  <option class="get_this" value="value 3">text3   value 3    text3</option>
  <option class="get_this" value="value 4">text4   value 4    text4</option>
</select>

  <input type="submit" value="Get all options" class="get_options"/>

  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script>
  var array_values = [];
  $(".get_options").click( function (){

  var values = $.map($('#selectBox option.get_this'), function(ele) {

   array_values.push(ele.value);
});

  console.log(array_values);
  });

  </script>
</body>
</html>

Answer 2

在按钮上设置.on('click'...方法。
在.each() .get_this上使用.text()提取文本
然后在每两个连续的空格处split()使用文本字符串（您不应使用太多的空格，否则会出现问题）
每个.get_this中都剩下一个数组。
通过引用索引1：array[1]
最后将每个字符串推入一个空数组。

演示

$('.get_options').on('click', function(e) {
  var result = [];
  $('.get_this').each(function() {
    var text = $(this).text();
    var array = text.split(/\s{2,}/);
    result.push(`${array[1]}`);
  });
  console.log(result);
});

<!DOCTYPE html>
<html>

<body>

  <select id="selectBox">
    <option class="get_this">text1   value 1   text1 </option>
    <option>text2   value 2   text2</option>
    <option class="get_this">text3   value 3   text3</option>
    <option class="get_this">text4   value 4   text4</option>
  </select>

  <input type="submit" value="Get all options" class="get_options" />

  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script>
  </script>
</body>

</html>

仅使用jquery

2 个答案:

演示