Question

我在表单中有一堆选择字段。选择字段中的某些选项有价格。价格始终采用<option>text (+£9.99)</option>格式，但显然价格可能会有所不同。如果其中一个选项被更改，我希望从选项中获取所有价格。我只想要在更改时选择的选项中的价格。

使用JQuery .change()方法很好，但我很难理解如何使用.match方法从选项中返回数值以及如何只获取选定的选项。我认为正则表达式是'/$\+£([0-9\.]+)$/'。

$("select").live('change',function () {
  var price = 0;
  $("select option:selected").live('each',function () {
    price += $(this).text().match('/\(\+£([0-9\.]+)\)/');
  });
  alert (price);
})

我正在使用，因为表单是通过ajax加载的，具体取决于页面上的其他表单。

任何帮助将不胜感激

由于

路

编辑：我尝试了$(this).val().match而不是.text方法。

编辑2：我无法更改选项的值，因为它对应于数据库中选项的ID。（参考下面丹尼斯的答案）

更新：为了在symfony中使用下面的正确答案，我必须添加一个自定义小部件：

class myWidgetFormSelect extends sfWidgetFormSelect {

  /**
   * Returns an array of option tags for the given choices
   *
   * @param  string $value    The selected value
   * @param  array  $choices  An array of choices and attributes array key "content" denotes text
   * to be entered in option, all other keys become attributes
   *
   * @return array  An array of option tags
   */
  protected function getOptionsForSelect($value, $choices) {
    $mainAttributes = $this->attributes;
    $this->attributes = array();

    if (!is_array($value)) {
      $value = array($value);
    }

    $value = array_map('strval', array_values($value));
    $value_set = array_flip($value);

    $options = array();
    foreach ($choices as $key => $option) {
      $attributes = array('value' => self::escapeOnce($key));
      if (!is_array($option))
        $content = $option;
      else {
        foreach ($option as $name => $val) {
          if ($name == 'content')
            $content = $val;
          else
            $attributes[$name] = $val;
        }
      }
      if (isset($value_set[strval($key)])) {
        $attributes['selected'] = 'selected';
      }

      $options[] = $this->renderContentTag('option', self::escapeOnce(isset($content) ? $content : ''), $attributes);
    }

    $this->attributes = $mainAttributes;

    return $options;
  }

}

此类允许选择数组为数组，并使用如下调用具有多个属性：

new myWidgetFormSelect(array(
  'choices' => array(
    '1' /* <- the id of the option */ => array(
      'content' => 'text (+£9.99)',
      'data-price' => '9.99'
    )
  )
))

上面的内容会创建一个带有选项的选择字段：

<option value="1" data-price="9.99">text (+£9.99)</option>

我希望这可以帮助任何有同样问题的人。

Answer 1

如果你像这样构建选择列表，每个选项都有data-price个属性：

<select>
    <option data-price="9.99">text (+£9.99)</option>
    <option data-price="1.99">text (+£1.99)</option>
</select>

然后您可以使用$('select option:selected').data('price')访问价格值。请参阅此实例：http://jsfiddle.net/8Z8Ft/

因此你的问题变得简单得多：

$("select").live('change',function () {
  var price = 0;
  $("select option:selected").each(function () {
    price += parseFloat($(this).data('price'));
  });
  alert (price);
})

实例：http://jsfiddle.net/yqTAB/

既然你提到了symfony，我做了一些搜索并找到了这个链接：http://blog.sznapka.pl/symfony-sfwidgetformselect-with-disabled-options/它描述了一个选项添加一个属性（在这种情况下是禁用的）。您可以使用相同的方法添加这些数据属性。

Answer 2

您可以按照以下方式构建选项：

<option value="9.99">text (+£9.99)</option>

这样你只需要致电$(this).val()。确保你使用parseInt或parseFloat，否则最终会连接字符串。

您的代码的另一个问题：

$("select option:selected").live('each',function () {

应该是

$("select option:selected").each(function () {

由于每个都是函数，而不是事件类型

Answer 3

匹配函数将返回一组数据。你应该为它编制索引。

Answer 4

这应该有效：

$("select").live('change',function () {
  alert ($(this).val().match('£([0-9.]+)')[1]);
});

使用JQuery从选择选项中选择价格

4 个答案: