jquery点击出现选择框

您可以使用jQuery的click函数和HTML的select标签来实现此功能。下面是一个简单的示例代码：

HTML代码

<button id="clickMe">点击我</button>
<select id="selection" style="display:none">
  <option value="1">选择项1</option>
  <option value="2">选择项2</option>
  <option value="3">选择项3</option>
</select>

jQuery代码

$(document).ready(function(){
  $("#clickMe").click(function(){
    $("#selection").fadeIn(); //出现选择框
  });
  
  $("#selection").change(function(){
    $("#selection").fadeOut(); //隐藏选择框
  });
});

这个示例代码会在按钮被点击时显示一个选择框，选择完成后选择框便会隐藏。

相关问题

jquery单选框点击事件

jQuery是一种JavaScript库，用于简化JavaScript编程。单选框是一种常用的表单元素，当用户点击单选框时，可以触发一个事件来执行相应的操作。

在jQuery中，可以使用click()方法来为单选框绑定点击事件。首先需要通过选择器选中对应的单选框元素，然后调用click()方法并传入一个回调函数作为参数。

例如，如果我们有一个单选框，其id为"radioBtn"，我们想要在用户点击该单选框时，在控制台打印出一条消息。我们可以使用下面的代码来实现：

$("#radioBtn").click(function(){
console.log("单选框被点击了");
});

以上代码中，$表示jQuery选择器，"#radioBtn"表示选择id为"radioBtn"的元素。click()方法会为该元素绑定一个点击事件，当用户点击该单选框时，回调函数中的代码会被执行。

当然，除了打印消息，你还可以在回调函数中执行其他的操作，比如改变元素的样式、发送Ajax请求等等。

总结起来，jQuery的click()方法可以用于为单选框以及其他元素绑定点击事件。通过选择器选中元素，并调用click()方法，并传入一个回调函数，即可在用户点击该元素时执行相应的操作。

ul+jquery自定义下拉选择框

下面是一个基于ul和jquery的自定义下拉选择框的示例：

HTML代码：

<div class="select-wrapper">
  <input type="hidden" name="select" value="">
  <div class="select-box">请选择</div>
  <ul class="select-options">
    <li data-value="1">选项1</li>
    <li data-value="2">选项2</li>
    <li data-value="3">选项3</li>
    <li data-value="4">选项4</li>
  </ul>
</div>

CSS代码：

.select-wrapper {
  position: relative;
  width: 200px;
  font-size: 14px;
  color: #333;
}

.select-box {
  position: relative;
  z-index: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
}

.select-options {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.select-options li {
  padding: 10px;
  cursor: pointer;
}

.select-options li:hover {
  background-color: #f5f5f5;
}

JS代码：

$(function() {
  $('.select-box').click(function() {
    $(this).siblings('.select-options').toggle();
  });

  $('.select-options li').click(function() {
    var value = $(this).data('value');
    var text = $(this).text();
    $(this).closest('.select-wrapper').find('input[type="hidden"]').val(value);
    $(this).closest('.select-wrapper').find('.select-box').text(text);
    $(this).closest('.select-options').hide();
  });

  $(document).click(function(event) {
    if (!$(event.target).closest('.select-wrapper').length) {
      $('.select-options').hide();
    }
  });
});

该示例中，使用了一个包含隐藏输入框、下拉框按钮和下拉选项的`div`容器作为自定义下拉选择框的外层容器。下拉框按钮(`.select-box`)用于打开或关闭下拉选项(`.select-options`)，下拉选项为一个`ul`列表，其中每个选项(`li`)都有一个`data-value`属性表示选项的值。

当用户点击某个选项时，使用jQuery将选项的值和文本分别设置到隐藏输入框和下拉框按钮中，并隐藏下拉选项。

当用户点击页面其它位置时，使用jQuery隐藏所有下拉选项。