选择选项不适用于Modal

有人可以帮助澄清吗？我试图做同样的事情，这个post但动态设置值。但是，当我这样做时，即使我在打开模态之前设置了数值，该值似乎没有被设置。选择选项不适用于Modal

我有一个新建活动按钮，点击它时，表的一部分，要求如下所示的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(); 
    };

来源

2017-02-24 RajveerParikh

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

来源

2017-02-24 19:26:46 jimmy

JavaScript运行时没有错误，但是如何确保它在模态之上运行？目前，当点击选项（创建新广告系列）时，我首先设置select元素的值，然后才调用openModal。 – RajveerParikh

在标记旁边添加脚本或在您的script.js文件中包含 – jimmy

我正在使用materializecss，因此我没有任何标记。此外，不知道如何才能知道选择的价值，因为有多个选项来“创建新的广告系列”，并根据被点击的选项，我希望选择该选择下拉列表中的值。 – RajveerParikh

我对Django模板并不熟悉，但是您的标记暗示可能在调用openModal（）之前模板不会被渲染。是这样吗？

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

要测试这个，你可以在你的for循环中放一个console.log，来检查点击事件发生时哪些选项可用。

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

来源

2017-02-24 19:52:47 jonofan

在调用openModal之前，所有选项都可用。即使我根本不打电话，所有选项都已经存在。 – RajveerParikh

@RajveerParikh您是否测试过您的代码正在查找该值并成功设置了selectedIndex？ – jonofan

所以我测试过它获得了正确的值。但它没有设置selectIndex，这是问题所在。我已经想通了。我意识到它全部在$（document）.ready下，这就是为什么它没有被设置为点击。现在修好了，谢谢！ – RajveerParikh

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

来源

2017-02-24 20:14:53 RajveerParikh

选择选项不适用于Modal

回答

相关问题