Question

我正在做一项学校任务而且我被困住了。

我想根据下拉菜单中选择的内容使输入字段变灰。

＆＃13;

function ccGrey() {
  if (document.getElementById("creditcard").onchane){
    alert("this doesnt work very well")
  }
}

＆＃13;

<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-16 control-label" for="payment-method">Payment Method</label>
  <div class="col-md-16">
    <select id="payment-method" name="payment-method" class="form-control order-form">
      <option value="1">Online</option>
      <option value="2">In Store</option>
    </select>
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-16 control-label" for="creditcard">Credit Card Number</label>
  <div class="col-md-16">
  <input id="creditcard" name="creditcard" type="text" placeholder="CC Number" class="form-control input-md order-form" onclick="ccGrey">
  </div>
</div>

＆＃13;

Answer 1

我不了解您的目的是什么，但是为了处理select选定的索引更改，您必须使用 SELECT 元素onChange而不是 INPUT 这样的事件：

＆＃13;

function selectChanged() {
  var x = document.getElementById("payment-method").value;
  document.getElementById("creditcard").disabled = (x == 1);
}
//Checking for initial run
selectChanged();

＆＃13;

<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-16 control-label" for="payment-method">Payment Method</label>
  <div class="col-md-16">
    <select id="payment-method" name="payment-method" class="form-control order-form" onChange="selectChanged()">
            <option value="1">Online</option>
            <option value="2">In Store</option>
        </select>
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-16 control-label" for="creditcard">Credit Card Number</label>
  <div class="col-md-16">
    <input id="creditcard" name="creditcard" type="text" placeholder="CC Number" class="form-control input-md order-form">
  </div>
</div>

＆＃13;

将字段灰显，直到选择某个下拉选项

1 个答案: