2016-11-17 61 views
-2

我有一個連接兩個選擇選項的表單。html-jquery,選中選項使下一個選項可見

現在是這樣的:

<form> 
 
    <select onchange="this.form.submit()"> 
 
     <option>1</option> 
 
     <option>2</option> 
 
     <option>3</option> 
 
     <option>4</option> 
 
    </select> 
 
    <select> 
 
     <option>Please select the first option</option> 
 
    </select> 
 
</form>

後,提交即將在今年:

<form> 
 
    <select onchange="this.form.submit()"> 
 
     <option>1</option> 
 
     <option>2</option> 
 
     <option>3</option> 
 
     <option selected>4</option> 
 
    </select> 
 
    <select> 
 
     <option>41</option> 
 
     <option>42</option> 
 
     <option>43</option> 
 
     <option>44</option> 
 
    </select> 
 
</form>

我怎樣才能讓不形提交以調用下一個選擇數據?

+1

這就是爲什麼我們使用JavaScript – Mahi

回答

1

您可以使用JavaScript XMLHttpRequest。如果您的服務器將響應作爲選擇選項直接使用此代碼。否則解析響應並將其放入您的選擇標記中。 JS的小提琴是 https://jsfiddle.net/w123ywdo/

<form> 
    <select onchange="changeFirstSelect(this)"> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
    </select> 
    <select id="second"> 
     <option>Please select the first option</option> 
    </select> 
</form> 

JS代碼是

var changeFirstSelect = function() { 
    var xhr = new XMLHttpRequest(); 
    xhr.onreadystatechange = function() { 
     if (xhr.readyState == XMLHttpRequest.DONE) { 
      alert(xhr.responseText); 
     } 
    } 
    xhr.open('GET', 'http://example.com', true); 
    xhr.send(null); 
} 
+0

我使用POST方法。我需要改變什麼? GET - > POST? –

+0

您仍然可以通過xhr請求使用POST。 –

+0

'xhr.open('POST','http://example.com',true); xhr.send(param);'param是你想要發送的參數 –

相關問題