Question

<select required class="bg-mega" id="size" name="size" style="height: 30px; width: 100px; border: 0px;">
          <option value="">Select</option>
          <option value="S" title="25 available!">Small</option>
          <option value="N" title="15 available!">Normal</option>
          <option value="L" title="10 available!">Large</option>
          <option value="XL" title="20 available!">extra Large</option>          
      </select>
      
      <input type="number" name="price-quanti" id="price"  placeholder="Select Quantity" style="height: 30px; width: 100px;" max="should change according to size"  min="1" required>

我需要一些小帮助。这里的情况是，当选择任何值时，最大值应该根据它。就像我选择大，输入字段应该最大为10.另外如果我选择正常，输入字段的最大值应该是15.

Answer 1

使用Javascript检查选择了哪个选项，然后通过使用DOM编辑属性来更改最大值。

查看是否已选中：

document.getElementsByTagName[elementToCheck]("option").selected

选择输入的最大尺寸：

document.getElementById("price").setAttribute("max", value);

Answer 2

＆＃13;

updateTextfield = function(obj){
  $('#price').attr('max-value', $($(obj).find('option:selected')[0]).attr('av'))
  CheckMaxValue(document.getElementById('price'))
 }
 
 CheckMaxValue = function(obj){
  if(parseInt(obj.value) > parseInt(obj.getAttribute('max-value'))){
    obj.value = obj.getAttribute('max-value')
  }
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select required class="bg-mega" id="size" name="size" style="height: 30px; width: 100px; border: 0px;" onchange="updateTextfield(this)">
          <option value="">Select</option>
          <option value="S" title="25 available!" av="25">Small</option>
          <option value="N" title="15 available!" av="15">Normal</option>
          <option value="L" title="10 available!" av="10">Large</option>
          <option value="XL" title="20 available!" av="20">extra Large</option>          
      </select>
      
      <input type="number" name="price-quanti" id="price"  placeholder="Select Quantity" style="height: 30px; width: 100px;" max="should change according to size"  min="1" required onkeyup="CheckMaxValue(this)">

＆＃13;

任何问题都不要犹豫

html javascript根据选项设置输入字段的最大值

2 个答案: