Question

如何更改文本输入以选择选项，我已尝试但未运行。如果我选择一个选项。

例如，如果我选择选项属，那么看起来像这样。

如果我选择选项PH，那么看起来像这样

这是我的剧本

<form action="javascript:void(0)" onsubmit="search()" id="search-form" method="post" enctype="multipart/form-data" class="form-horizontal">
            <div class="form-group">
                <div class="col-md-12">
                    <div class="input-group">
                        <span class="input-group-addon">Search</span></span>
                        <input type="text" name="find_genus" id="find_genus" class="form-control"  placeholder="ex: genus or PH">
                        <select name="ph_option" id="ph_option" title="select" class="selectpicker" data-width="15%">
                            <option value="genus">1-26</option>
                            <option value="ph">26-50</option>
                        </select>
                        <select name="option_kategori" id="option_kategori" title="Kategori" class="selectpicker" data-width="15%">
                            <option value="genus">Genus</option>
                            <option value="ph">PH</option>
                        </select>
                        <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        </button>
                        </span> 
                    </div>
                </div>
            </div>
        </form>

JS脚本

$(document).ready(function(){
    $('[name="ph_option"]').hide;
    if (!$('#option_kategori').val() == "ph"){
        $('[name="find_genus"]').change(function () {
            $('[name="ph_option"]').show;
            $('[name="find_genus"]').hide;
        })  
    }
});

Answer 1

试试这个。

演示：https://jsfiddle.net/8t88brd3/1/

HTML：

<form action="javascript:void(0)" onsubmit="search()" id="search-form" method="post" enctype="multipart/form-data" class="form-horizontal">
  <div class="form-group">
    <div class="col-md-12">
      <div class="input-group">
        <span class="input-group-addon">Search</span>
        <div class="input-div">
          <input type="text" name="find_genus" id="find_genus" class="form-control" placeholder="ex: genus or PH">
        </div>
        <div class="select-div">
          <select name="ph_option" id="ph_option" title="select" class="selectpicker" data-width="15%">
            <option value="">1-26</option>
            <option value="">26-50</option>
          </select>
        </div>
        <select name="option_kategori" id="option_kategori" title="Kategori" class="selectpicker" data-width="15%">
          <option value="genus">Genus</option>
          <option value="ph">PH</option>
        </select>
        <span class="input-group-btn">
          <button class="btn btn-default" type="submit">
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
          </button>
        </span>
      </div>
    </div>
  </div>
</form>

CSS：

.select-div, .input-div {
  display: inline-block;
}

使用Javascript：

$(document).ready(function() {
  $('.select-div').hide();

  $('[name="option_kategori"]').change(function() {
    if ($('[name="option_kategori"]').val() === "ph") {
      $('.select-div').show();
      $('.input-div').hide();
    } else {
      $('.select-div').hide();
      $('.input-div').show();
    }
  })
});

Answer 2

function getTxtbox(){
  return '<input class="form-control" type="text" id="txt_genus">'
}

function getDropdown(){
  return [
    '<select name="ph_option" id="ph_option" title="select" class="form-control" data-width="15%">',
    '<option value="genus">1-26</option>',
    '<option value="ph">26-50</option>',
    '</select>'
  ].join('');
}
$('#swap-area').html(getTxtbox()); //default

$('.menu-ddm1').on('click',function(){
  $('#ddm1').html($(this).html());
  
  var display = $('#swap-area');
  
  switch($(this).html()){
    case 'Genus' : 
      display.html(getTxtbox());
      break;
    case 'PH' :
      display.html(getDropdown());
     break;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<form class="form-inline">
<div class="form-group">
  <label class="control-label">Input addons</label>
  <div class="input-group">
    <span class="input-group-addon">Search</span>
    <span id="swap-area">
      <!-- put element in here -->
    </span>
    <span class="input-group-btn">
      <div class="dropdown">
        <button 
        class="btn btn-default dropdown-toggle" 
        type="button" 
        id="ddm1" 
        data-toggle="dropdown" 
        aria-haspopup="true" 
        aria-expanded="true">
          Genus
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="ddm1">
          <li><a href="#" class="menu-ddm1">Genus</a></li>
          <li><a href="#" class="menu-ddm1">PH</a></li>
        </ul>
      </div>
    </span>
    <span class="input-group-btn">
      <button class="btn btn-default" type="button">
        <i class="glyphicon glyphicon-search"></i>
      </button>
    </span>
  </div>
</div>
</form>

使用jquery使用select选项更改输入文本

2 个答案: