Question

有人可以帮忙澄清一下吗？我正在尝试做与此post相同的事情，但动态设置值。但是，当我这样做时，即使我在打开模态之前设置了值，该值似乎也没有设置。

我有一个Create New Campaign按钮作为表格的一部分，点击后，调用下面显示的javascript方法：

<th data-field="create_campaign"><span class="create_campaign" text="{{product.id}}"><a class="" href="#" data-target="campaign_modal" value="{{product.id}}">create new campaign</a></span><br></th>

HTML

<div id="campaign_modal" class="modal">
    <div class="modal-content">
        <blockquote>
            Product Campaign
        </blockquote>
        <div id="" class="row">
            <div class="input-field col s5">
                <select id="product_selector" name="product_selector">
                    <option disable value=" ">Select a Product </option>
                    {% for product in all_org_products %}
                        <option value="{{product.id}}">{{product.name}}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="input-field col s5">
                <input type="text" id="campaign" class=""/>
                <label for="campaign" id="label_campaign"> Campaign </label>
            </div>
            <div class="input-field col s2">
                <a class="btn-floating btn-small waves-effect waves-light teal" onclick="submitCampaign()"><i class="material-icons">add</i></a>
            </div>
        </div>
        <div class=" center">
            <span class="done_btn"><button id="done_btn" class="btn blue waves-effect waves-light modal-action"><i class="material-icons left" >done</i>Done</button></span>
        </div>
    </div>
</div>

的Javascript

    $('.create_campaign').click(function () {
        product_id = $(this).attr('text');
        var product_select = document.getElementById('product_selector');
        console.log(product_select);
        var index=0;
        for (var i=0; i<product_select.options.length; i++){
            if (product_select.options[i].value == product_id){
                index=i;
                product_select.value=product_id
                break;
            }
        }
        product_select.selectedIndex = index;
        openCampaignModal();
    });

    function openCampaignModal(){
        $('#campaign_modal').openModal();
    };

Answer 1

问题是代码在$（document）.ready（function（））下，这就是为什么它当时无法获取值。我把我的函数放在document.ready方法之外，现在正在工作！

Answer 2

确保您的javascript正在运行且没有错误，并且它高于您的模态。你的模态在你的javascript运行之前就被编译了，所以当你点击模态时就无法获取数据。

Answer 3

我不熟悉Django模板，但您的标记表明，在调用openModal（）之前，模板可能不会被渲染。是这种情况吗？

如果是这样，那么您需要在呈现模式的<option>元素后运行自动选择代码。

要对此进行测试，您可以在for循环中放置一个console.log，以检查单击事件发生时可用的选项。

for (var i=0; i<product_select.options.length; i++){    
    console.log(product_select.options[i])
}

选择不适用于Modal的选项

3 个答案: