使用Js更改選擇選項的值而不刷新頁面

所以，我想使用javascript更改選擇選項，但不用重新加載頁面。我能夠改變使用document.getElementById.value 其他要素數據，但不能選擇元素使用Js更改選擇選項的值而不刷新頁面

這就是我要做的：有一種形式，我的網頁裏面的表，該表的數據獲取動態使用PHP。表單將編輯數據。所以當編輯按鈕被按下時，針對它的行數據將被自動填充到表單中。

表單中的所有其他元素都可以使用我的代碼獲取數據。除了選擇選項輸入元素。下面是我已經使用這裏的形式的jsfiddle的每個元素的代碼：http://jsfiddle.net/ZE6BX/11/

document.getElementById("l_type").value = data[1];

數據陣列包含針對被壓修改所在的行的值！

來源

2013-10-29 user2529058

這可能會有幫助，你可能會做一些其他的錯誤，因爲你的代碼看起來應該起作用。 http://stackoverflow.com/questions/78932/how-do-i-programatically-set-the-value-of-a-select-box-element-using-javascript –

你不能把PHP代碼放在jsfiddle 。 – Barmar

學習AJAX。 http://www.w3schools.com/php/php_ajax_database.asp – Akshay

這工作http://jsfiddle.net/ZE6BX/12/

你必須在情況差異導致的在表之間VE和Ve的作爲選擇的值。
下面的代碼

HTML：

<div id="l-form"> 
    <form method="post" class="DA_custom_form" id="l-form" action="php/add.php"> 
      <h3>Add</h3> 

     <label>Name</label> 
     <input type="text" class="field" id="l_name" name="l_name" /> 
     <label>City</label> 
     <input type="text" class="field" id="l_city" name="l_city" /> 
     <label>Phone</label> 
     <input type="text" class="field" id="l_phone" name="l_phone" /> 
     <label>OP</label> 
     <div class="cl">&nbsp;</div> 
     <input type="text" class="field" id="l_op" name="l_op" /> 
     <label>Type</label> 
     <select class="select_field" id="l_type" name="l_type"> 
      <option value=" ">Select type</option> 
      <option value="cu">Cu</option> 
      <option value="Ve">Ve</option> 
      <option value="Ex">Ex</option> 
     </select> 
     <div class="cl">&nbsp;</div> 
     <div class="btnp"> 
      <input type="submit" value="Save" name="submit" id="submit" /> 
     </div> 
</div> 
</form> 
</br> 
</br> 
<table id="existing" border=1> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Type</th> 
      <th>View/Edit</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr style:padding-left:10px;> 
      <td>sweet_name</td> 
      <td>Ve</td> 
      <td style="display:none">dream_city</td> 
      <td style="display:none">123456</td> 
      <td style="display:none">SWAG</td> 
      <td> 
       <button class="edit_button" value="Edit" name="button">Edit</button> 
      </td> 
     </tr> 
    </tbody> 
</table>

JS：

$(document).ready(function() { 
    var data; 
    $("#existing").on("click", ".edit_button", function() { 
     data = $(this).closest("td").siblings().map(function() { 
      return $(this).text(); 
     }).toArray(); 

     console.log(data[0]); // name 
     console.log(data[1]); //type 
     console.log(data[2]); //city 
     console.log(data[3]); //phone 
     console.log(data[4]); //op 

     document.getElementById("l_name").value = data[0]; 
     $("#l_type").value = data[1]; 
     document.getElementById("l_city").value = data[2]; 
     document.getElementById("l_phone").value = data[3]; 
     document.getElementById("l_op").value = data[4]; 


    }); 
});

來源

2013-10-29 07:59:33

爲什麼你需要使用'.get（0）'？只有一個匹配元素，因爲您是通過ID匹配的。 – Barmar

@Barmar很對 - 編輯感謝+1 –

ü可以檢查是否使用索引值或選項值。

var opt = ocument.getElementById('l_type').options; 
for(var i=1;i<opt.length;i++){ 
    if(opt[i].value == 'Ve'){ 
    **opt[i].selected = true;** } 
}

這將幫助你。

來源

2013-10-29 10:28:37 ran

使用Js更改選擇選項的值而不刷新頁面

回答

相關問題