選擇選項不適用於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

回答

相關問題