Question

以下是我开始使用的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<script>
window.onload = function() {
    //Range
    var val = $('#slider').val();
    output = $('#output');
    output.html(val);

    $('#slider').on('change', function() {
      output.html(this.value);
    });

    function showSlider() {
      $('#slider').show();
      $('#textInput').hide();
      output.html('0');
    }

    function showTextInput() {
      $('#slider').hide();
      $('#textInput').show();
      $('#textInput').val('');
      $("#output").html('skin url');
    }

    $('#Main').change(function() {
      switch (this.value) {
        case 'optiona':
          $('#slider').prop({
            'min': 0,
            'max': 20
          });
          showSlider();
          break;
        case 'optionb':
          $('#slider').prop({
            'min': -10,
            'max': 90
          });
          showSlider();
          break;
        case 'optionc':
          showTextInput();
          break;
        case 'optiond':
          showTextInput();
          break;        
        default:
    }
    $('#slider').val(0);
  });

}    

</script>

  <body>
    <form>
      <fieldset>
        <legend>Options</legend>
        <p>
          <label>
            Select option:
          </label>
          <select id="Main" onchange="changeRange('10', '80')">
          	<option value="default">select an option</option>
            <option value="optiona">a</option>
            <option value="optionb">b</option>           
            <option value="optionc">c</option>  
            <option value="optiond">d</option>        
          </select>
        </p>
        <p>        
          <span id="output"></span></br>    
          <input type="range" min="0" max="9000" id="slider" value="0" name="range" style="display: inline-block;width: 150px">
          <textarea id="textInput" style="display: none; width: 259px; margin: 0px; height: 15px;"></textarea>          
          <span id="output"></span></br>    
          <input type="submit" onclick="submited()" value="Submit" style="margin-left: 82%;" class="button" id="submitDemo"/>
        </p>
      </fieldset>
    </form>
  </body>

到目前为止它工作正常，我想要选项C和D的文本框，休息时应该有一个显示值的滑块，这样做。

单击提交按钮时，我想使用选项的值进行提醒，因此我添加了此功能：

  function submited() { 
    var selectedValue = document.getElementById("slider").value;
    var finaloutput = $("#output").html()
    if (selectedValue != 'optionc') {
        alert(selectedValue + ' has the value ' + finaloutput);
        }
    if (selectedValue == 'optionc') {
        var textcontent = $('#textInput').val();
        alert('your value is '+ textcontent);
    }
    if (selectedValue == 'optiond') {
        var textcontent = $('#textInput').val();
        alert('your second value of the last option is '+ textcontent);

  };

但是，我注意到当我点击提交按钮时，它更改了添加滑块范围值的URL，而不是使用滑块的值进行警告。

有人可以帮我解决这个问题吗？感谢。

提交时运行功能点击

0 个答案: