javascript - 如何创建选定的项目并输入该项目是什么

Question

我想学习如何从数据库中搜索某些内容，它可以工作，这里是代码

<fieldset>
<form action="" method="POST">
    By Round Id : <input id="input-round" type="text" name="name" size="15"/><br/><br/>
    By Player Id : <input id="input-player-id" type="text" name="player" size="15"/><br/><br/>
    <input id="btn-form-close" type="button" value="Cancel" />
</form>

<script type="text/javascript">

$("#btn-form-close").click(function(){
$('#view-form').html('');
});

$('#input-round').keyup(function(){
    var name = $('#input-round').val();
        $.ajax({
            type:"POST",
            url:"<?php echo site_url('account/look_search_history_round');?>",
            data:'nama='+name,
            success:function(html){
                $('#view-list-round-id').html(html);
            }
        });
});
$('#input-player-id').keyup(function(){
    var player = $('#input-player-id').val();
        $.ajax({
            type:"POST",
            url:"<?php echo site_url('account/look_search_history_player');?>",
            data:'nama='+player,
            success:function(html){
                $('#view-list-round-id').html(html);
            }
        });
});

但我想创建一些类似可以选择的选项，这样我就可以选择搜索按回合ID或按玩家ID。但我不知道如何实现这一点。我得到的是选择该选项

<select class="form-control" id="sel1">
    <option> By Round Id </option>
    <option> By Player Id</option>
</select>

但是输入呢？谁能给我举个例子，非常感谢

Answer 1

首先，您可能需要在表单中包含:

<form action="" method="POST">
   Search by
   <select class="form-control" id="sel1">
      <option id="roundId"> By Round Id </option>
      <option id="playerId"> By Player Id</option>
   </select>
     Id : <input id="input-round" type="text" name="name" size="15"/><br/><br/>
   <input id="btn-form-close" type="button" value="Cancel" />
</form>

然后将选定的选项发送到后端进行处理

$('#input-round').keyup(function(){
    var name = $('#input-round').val();
    var choice = $('#sel1 option:selected').val()
        $.ajax({
            type:"POST",
            url:"<?php echo site_url('account/look_search_history_round');?>",
            data:'nama='+name+'&choice='+choice, //process this choice in backend..
            success:function(html){
                $('#view-list-round-id').html(html);
            }
        });
});