Question

我有一个简单的选择下拉菜单。我想要做的是......用户选择保险公司名称。但是，如果用户没有看到他们所在的公司，那么我希望有一个“其他”选项来填充输入，以便用户可以手动输入保险公司。

我哪里错了？

    <h3><b>Insurance Information</b></h3>
    <style> #InsuranceCompanyOther{display:none;}</style>
    <script>$('p select[name=InsuranceCompany]').change(function(e){
  if ($('p select[name=InsuranceCompany]').val() == ''){
    $('#InsuranceCompanyOther').show();
  }else{
    $('#InsuranceCompanyOther').hide();
  }
});</script>
    <div class="control-group">   
                <label class="control-label">Insurance Comapny</label>
                    <div class="controls">
                        <select  class="form-control" name="InsuranceCompany">
                            <option value="<?php echo !empty($InsuranceCompany)?$InsuranceCompany:'';?>"><?php echo !empty($InsuranceCompany)?$InsuranceCompany:'-- Select One --';?></option>            
                            <option value="Allstate">Allstate</option>
                            <option value="State Farm">State Farm</option>
                            <option value="Farmers">Farmers</option>
                            <option value="Travelers">Travelers</option>
                            <option value="Safeco">Safeco</option>
                            <option value="USAA">USAA</option>
                            <option value="MetLife">MetLife</option>
                            <option value="Farm Bureau">Farm Bureau</option>
                            <option value="Gem State">Gem State</option>
                            <option value="Amica">Amica</option>
                            <option value="American Family">American Family</option>
                            <option value="">Other</option>
                        </select>
                         <div id="InsuranceCompanyOther">
                            <p>Please Specify: <label id="InsuranceCompanyOther"><input name="InsuranceCompany" type="text" placeholder="Input Insurance Company" size="50" /></label></p>
                        </div>
                    </div>
    </div>

P.S。我不相信这值得投票......

Answer 1

您需要在代码中执行的核心操作是：

你的javascript代码应该在document.ready，因为脚本是
在html之前加载，并在此将事件附加到
尚未在DOM上的元素。
标记select[name=InsuranceCompany]不在p标记中因此从jQuery选择器中删除p。

工作片段：

＆＃13;

$('document').ready(function() {
  $('select[name=InsuranceCompany]').change(function(e) {
    if ($('select[name=InsuranceCompany]').val() == '') {
      $('#InsuranceCompanyOther').show();
    } else {
      $('#InsuranceCompanyOther').hide();
    }
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3><b>Insurance Information</b></h3>
<style>
  #InsuranceCompanyOther {
    display: none;
  }
</style>
<div class="control-group">
  <label class="control-label">Insurance Comapny</label>
  <div class="controls">
    <select class="form-control" name="InsuranceCompany">
      <option value="<?php echo !empty($InsuranceCompany)?$InsuranceCompany:'';?>">
        <?php echo !empty($InsuranceCompany)?$InsuranceCompany: '-- Select One --';?>
      </option>
      <option value="Allstate">Allstate</option>
      <option value="State Farm">State Farm</option>
      <option value="Farmers">Farmers</option>
      <option value="Travelers">Travelers</option>
      <option value="Safeco">Safeco</option>
      <option value="USAA">USAA</option>
      <option value="MetLife">MetLife</option>
      <option value="Farm Bureau">Farm Bureau</option>
      <option value="Gem State">Gem State</option>
      <option value="Amica">Amica</option>
      <option value="American Family">American Family</option>
      <option value="">Other</option>
    </select>
    <div id="InsuranceCompanyOther">
      <p>Please Specify:
        <label>
          <input name="InsuranceCompany" type="text" placeholder="Input Insurance Company" size="50" />
        </label>
      </p>
    </div>
  </div>
</div>

＆＃13;

编辑：

在您的代码中加入 jQuery 库，例如CDN：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Javascript如果选择'other'然后填充输入字段

1 个答案: