html-jquery，选中选项使下一个选项可见

Question

我有一个连接两个选择选项的表单。

现在是这样的：

<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>

我怎样才能让不形提交以调用下一个选择数据？

Answer 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); 
}