Question

我想设计一个网页表单，在文本框中键入5到10之间的数字时必须控制一个文本框和一个下拉列表，下拉列表包括1,2,3,4,5当在文本框中键入11到20之间的数字，下拉列表包括6,7,8,9,10。

如何在没有页面刷新的情况下进行操作？

请用代码解释。

Answer 1

我认为以下代码可能会对您有所帮助。

 <select id="txt" onchange="changeNumber()">
   <option>select value</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
  <option>13</option>
  <option>14</option>
  <option>15</option>
  <option>16</option>
  <option>17</option>
  <option>18</option>
  <option>19</option>
  <option>20</option>
</select>
<select id="mySelect">
  <option>21</option>
  <option>22</option>
  <option>23</option>
  <option>24</option>
</select>
<script>
function changeNumber(){
    var t_value=document.getElementById('txt').value;
    if(t_value==10 ||t_value==11 || t_value==12 || t_value==13 || t_value==14 || t_value==15 ){
        var x = document.getElementById("mySelect").selectedIndex;
        var y = document.getElementById("mySelect");
        var j=1
        for(var i=0;i<=y.options.length;i++){
            y[i].text=j;
            j++;
        }
    }
}
</script>

通过这种方式，您可以解决第二个问题。

Answer 2

您也可以按照以下代码进行操作。

<input type="text" id="txt" onkeyup="checkValue();" />
<select id="mySelect">
  <option>21</option>
  <option>22</option>
  <option>23</option>
  <option>24</option>
</select>
<script>
function checkValue(){
    var t_value=document.getElementById('txt').value;
    if(t_value==10 ||t_value==11 || t_value==12 || t_value==13 || t_value==14 || t_value==15){
        var x = document.getElementById("mySelect").selectedIndex;
        var y = document.getElementById("mySelect");
        var j=1
        for(var i=0;i<=y.options.length;i++){
            y[i].text=j;
            j++;
        }
    }
}
</script>

我认为你需要这种解决方案。

文本框和下拉列表

2 个答案: