Question

请查看我的以下代码

的javascript

<script>
    $(document).ready(function () {   // Help for the HTML4 version.
    $('select[name=brandTxtSelect]').change(function () {

        if($(this).val()=="Select")
        {
            document.getElementById('brandTxt').readOnly = false;
            document.getElementById("brandTxt").style.display = "block";
        }
        else
        {
            document.getElementById('brandTxt').readOnly = true;
            document.getElementById("brandTxt").style.display = "none";
            $('input[name=brandTxt]').val($(this).val());
        }

    });
});
</script>

HTML

<div class="form-group">
              <label class="col-md-4 control-label" for="brandTxt">Brand</label>
              <div class="col-md-4">
                  <select name="brandTxtSelect" class="form-control input-md">
                    <option value="">Select</option>
                    <option value="A">A</option>
                    <option value="B">B</option>
                </select>

               <!-- <input id="textinput" name="brandTxt" type="text" placeholder="Type Drug Brand" class="form-control input-md" > -->
              </div>
              <div class="col-md-4">
                  <input type="text" id="brandTxt" name="brandTxt" class="form-control input-md">
              </div>

            </div>

当我从下拉框中选择“选择”时，我正在尝试使文本字段可见并启用。不幸的是，else部分似乎总是被解雇了。我必须在JavaScript中做错事，请指教。

Answer 1

“选择”的值不是选择，是“”。

更改：

<option value="">Select</option>

有：

<option value="Select">Select</option>

Answer 2

val()函数会返回所选<option>的值，而不是标题。

由于第一个<option>的实际值是一个空字符串（""），您只需尝试这样做：

if(!$(this).val())

或者，如果您完全省略value属性，它会自动将标题（“选择”）视为值。

请参阅val()

Answer 3

你的代码很有趣：D

你忘了，选择的值是空的，所以calue-check必须是空的字符串。

$('select[name=brandTxtSelect]').change(function () {
  if($(this).val()==""){
    document.getElementById('brandTxt').readOnly = false;
    document.getElementById("brandTxt").style.display = "block";
  } else {
    document.getElementById('brandTxt').readOnly = true;
    document.getElementById("brandTxt").style.display = "none";
    $('input[name=brandTxt]').val($(this).val());
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="col-md-4 control-label" for="brandTxt">Brand</label>
  <div class="col-md-4">
    <select name="brandTxtSelect" class="form-control input-md">
      <option value="">Select</option>
      <option value="A">A</option>
      <option value="B">B</option>
    </select>

               <!-- <input id="textinput" name="brandTxt" type="text" placeholder="Type Drug Brand" class="form-control input-md" > -->
  </div>
  <div class="col-md-4">
    <input type="text" id="brandTxt" name="brandTxt" class="form-control input-md">
  </div>
</div>

Answer 4

$('select[name=brandTxtSelect]').change(function () {
  if($(this).val()==""){
    document.getElementById('brandTxt').readOnly = false;
    document.getElementById("brandTxt").style.display = "block";
  } else {
    document.getElementById('brandTxt').readOnly = true;
    document.getElementById("brandTxt").style.display = "none";
    $('input[name=brandTxt]').val($(this).val());
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="brandTxtSelect" class="form-control input-md">
      <option value="">Select</option>
      <option value="Other">Other</option>
      <option value="Option">Options</option>
    </select>
<input type="text" id="brandTxt" name="brandTxt" class="form-control input-md">

尝试一次

无法比较JavaScript中下拉框和文本字段中的值

4 个答案: