选择选项不适用于模态

Question

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

我有一个创建新广告系列按钮作为表格的一部分，单击该按钮时会调用如下所示的 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])
}