如何加载选择器中的所有选项而不选择

时间:2014-12-27 18:18:13

标签: javascript jquery select option

当我为新产品添加选项时,必须使用选择器来选择我需要的选项。但是所有可用的选项都是必需的,并且必须在不使用选择器的情况下可见。 如何在不使用选择器的情况下通过option_id添加以形成每个选项?

HTML.file

<div class="ms-options">
    <p class="error" id="error_options"></p>

    <div class="options"></div>

    <div>
        <select name="options[0]" class="select_option">
            <option value="0" disabled="disabled" selected="selected"><?php echo $ms_options_add; ?></option>
            <?php foreach($options as $option) { ?>
            <option value="<?php echo $option['option_id']?>"><?php echo $option['name']; ?></option>
            <?php } ?>
        </select>
    </div>
</div>

JS.file

// add
$('body').delegate(".select_option", "change", function() {
    $(this).children(':selected').attr('disabled', 'disabled');
    var option_id = $(this).children(':selected').val();
    var select = this;

    $.get($('base').attr('href') + 'index.php?route=seller/account-product/jxRenderOptionValues&option_id=' + option_id, function(data) {
        var lastRow = $(select).parents('.ms-options').find('.option:last input:last').attr('name');

        if (typeof lastRow == "undefined") {
            var newRowNum = 1;
        } else {
            var newRowNum = parseInt(lastRow.match(/[0-9]+/g).shift()) + 1;
        }

        var data = $(data);
        data.find('input,select').attr('name', function(i,name) {
            if (name) return name.replace('product_option[0]','product_option[' + newRowNum + ']');
        });
        $('div.options').append(data);
    });
    $(this).val(0);
});

pls hlp

我的尝试

html.file

<div class="ms-options">
    <p class="error" id="error_options"></p>



    <div>
            <?php foreach($options as $option) { ?>
            <div id="<?php echo $option['option_id']?>"></div>
            <?php echo addoption($option['option_id'])?>
            <?php } ?>
    </div>
</div>

js.file

$(function() {

    function addoption(optionid) {

        var option_id = optionid;
        $.get($('base').attr('href') + 'index.php?route=seller/account-product/jxRenderOptionValues&option_id=' + option_id, function(data) {


            $('div'."optionid").append(data);
        });
    });
});

但是我收到了这条消息

致命错误:在第9行的/home/moidomki/public_html/catalog/view/theme/default/template/multiseller/account-product-form-options.tpl中调用未定义的函数addoption()

看起来它无法看到我的功能?

1 个答案:

答案 0 :(得分:0)

您正在呼叫delegate。看到你的第一个参数?它是".select_option"。您可以在此处指定要在其中定义选项的标记的选择器。从这里开始,您无需再次指定它。在作为参数传递给delegate的函数内部,您可以使用$(this)代替。如果可能的话,最好在$(this)内使用delegate,因为那时jquery不必从DOM中搜索它。

见这个例子:

$( "table" ).delegate( "td", "click", function() {
    $( this ).toggleClass( "chosen" );
});

从这里采取。

编辑:

我正在给出一些关于Yurii Litvinenko所做实验的笔记:

  • 让我首先明确指出,人们实际上是在努力学习,这是一件非常愉快的事情。当然,实验存在缺陷,但不要忘记学习它的最佳方法是实际做到这一点
  • 您指向的实际问题是您尝试使用php调用javascript函数。重要的是要了解您的PHP代码称为服务器端或后端,您的JavaScript代码称为客户端或前端。您的php正在服务器上运行,并且您的javascript正在用户的计算机上运行,​​因此,您无法在服务器端调用客户端功能
  • 我在新实验中看不到您的选择标记
  • 如果我没有弄错的话,您已成功填写服务器上的初始选项集
  • 如果您打算在已经发送到客户端的选项中添加选项,那么您需要使用javascript来执行此操作:

    function addOption(id, name) { $(".select_option").html(select_option.html() + '<option value="' + id + '">' + name + '</option>'); }