Question

我想创建一个按钮列表作为菜单，并且用户必须能够选择其中的任何一个按钮。选择该按钮时，必须可见该按钮已被选择，然后会有另一个表单提交按钮。在提交表单时，我想要所选按钮的ID。

我对于必须使用什么才能具有此功能感到困惑。

我不需要下拉菜单。我想要可以从中选择唯一按钮的按钮列表。

由于我无法透露自己的想法，因此我向您展示示例代码类型：

<form action="formSubmit.php">

    <input type="button" id="opt1" value="Option 1"><br>
    <input type="button" id="opt2" value="Option 2"><br>
    <input type="button" id="opt3" value="Option 3"><br>
    <input type="button" id="opt4" value="Option 4"><br>
    <input type="button" id="opt5" value="Option 5"><br><br><br>

    <button type="Submit">Submit</button>
</form>

预先感谢...

Answer 1

尝试这样。

$(".btn").click(function(){

  var val = $(this).val();
  $('.btn').removeClass('selected');
  $(this).addClass('selected');
  $('.selectedVal').val(val);

});

.selected{
  color :red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="formSubmit.php">

    <input type="button" class="btn" id="opt1" value="Option 1"><br>
    <input type="button" class="btn" id="opt2" value="Option 2"><br>
    <input type="button" class="btn" id="opt3" value="Option 3"><br>
    <input type="button" class="btn" id="opt4" value="Option 4"><br>
    <input type="button" class="btn" id="opt5" value="Option 5"><br><br><br>
    
    
    <input type="hidden" class="selectedVal" name="selectedVal"/>
    <button type="Submit">Submit</button>
</form>

提交值后，您将在selectedVal中找到您的值，就像$_REQUEST['selectedVal']一样。

Answer 2

有很多方法可以实现这一目标。一种方法是将按钮的id作为每个按钮的data-id属性。并为每个按钮的点击侦听器编写一个。像下面这样。

$('button').on('click', function(){
  // you can access button properties using this keyword here. 
})

您拥有ID并保存到某个变量，以便在提交表单时可以拥有此变量。

Answer 3

尝试一下。刚通过 this

获得了单击按钮的ID

var selectedButtonId = "";

$('.button').click(function() {

  selectedButtonId = this.id;
  alert(selectedButtonId);

});


$("#submitButton").click(function() {
  alert("you have selected" + selectedButtonId)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="opt1" value="Option 1" class="button"><br>
<input type="button" id="opt2" value="Option 2" class="button"><br>
<input type="button" id="opt3" value="Option 3" class="button"><br>
<input type="button" id="opt4" value="Option 4" class="button"><br>
<input type="button" id="opt5" value="Option 5" class="button"><br><br><br>
<button type="Submit" id="submitButton">Submit</button>

在单击按钮时如何显示它已被选中，并在表单提交时获取该按钮的ID

3 个答案: