Question

我想在选项输入中存储多个值。我四处搜寻并想出如何做到这一点。但是，我找不到的是如何从名称数组中获取值。正如您在代码段中看到的那样，我在更改事件中有这个并将值写入#result。我想将years[]的值写为#years。

如何获取名称数组的值？

$('#tp-frequency').on('change', function () {
  var templates = $('#tp-frequency option:selected').val();
  $('#result').html(templates);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="tp-frequency">
  <option value=''disabled selected>Please choose option</option>
  <option class="choice" value='3' name="years[3]">3 years - 3 cards</option>
  <option class="choice" value='4' name="years[2]">2 years - 4 cards</option>
  <option class="choice" value='2' name="years[5]">5 years - 2 cards</option>
</select>
<p id="result"></p>
<p id="years"></p>

Answer 1

如果您只想获取名称attr内的数字，可以使用所选选项的attr('name')，然后使用正则表达式来获取数字。

$('#tp-frequency').on('change', function() {
  $('#result').html($('#tp-frequency option:selected').val());
  $('#years').html($(this).find(':selected').attr('name').match(/\[(.*?)\]/)[1])
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="tp-frequency">
  <option value='' disabled selected>Please choose option</option>
  <option class="choice" value='3' name="years[3]">3 years - 3 cards</option>
  <option class="choice" value='4' name="years[2]">2 years - 4 cards</option>
  <option class="choice" value='2' name="years[5]">5 years - 2 cards</option>
</select>
<p id="result"></p>
<p id="years"></p>

您还可以创建名为data-years的自定义数据属性，然后使用data("years")

获取其值

$('#tp-frequency').on('change', function() {
  $('#result').html($(this).find(':selected').val())
  $('#years').html($(this).find(':selected').data('years'))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="tp-frequency">
  <option value='' disabled selected>Please choose option</option>
  <option class="choice" value='3' data-years="3">3 years - 3 cards</option>
  <option class="choice" value='4' data-years="2">2 years - 4 cards</option>
  <option class="choice" value='2' data-years="5">5 years - 2 cards</option>
</select>
<p id="result"></p>
<p id="years"></p>

Answer 2

我刚注意到您使用value属性来存储卡片，使用name属性来存储年份。生成选项时，您可以轻松地使用其他属性（例如data-years和data-cards）来存储这些值的数字。获得这样的元素：

<option class="choice" data-cards='3' data-years="3">3 years - 3 cards</option>
<option class="choice" data-cards='4' data-years="2">2 years - 4 cards</option>
<option class="choice" data-cards='2' data-years="5">5 years - 2 cards</option>

使用这样的一些javascript代码：

var $option = $('<option></option>');
$option.addClass('choice');
$option.attr('data-years', youYearsValueHere);
$option.attr('data-cards', youCardsValueHere);
$option.text(/*...*/);

因此，当您想要获得这些值时，您可以轻松地执行此操作：

$('#tp-frequency').on('change', function () {
    var $option = $('#tp-frequency option:selected');
    var years = $option.attr('data-years');
    var cards = $option.attr('data-cards');
});

Answer 3

根据我的理解，这就是你想要的。如果不进一步解释，我会解决问题。

＆＃13;

$('#tp-frequency').on('change', function () {
  var templates = $('#tp-frequency option:selected').attr('name');
  $('#result').html(JSON.parse(templates.match(/\[(.*?)\]/)[0]));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="tp-frequency">
  <option value=''disabled selected>Please choose option</option>
  <option class="choice" value='3' name="years[3]">3 years - 3 cards</option>
  <option class="choice" value='4' name="years[2]">2 years - 4 cards</option>
  <option class="choice" value='2' name="years[5]">5 years - 2 cards</option>
</select>
<p id="result"></p>
<p id="years"></p>

＆＃13;

获取名称数组的值

3 个答案: