如何在没有html选择的情况下制作下拉列表

时间：2017-04-12 07:04:54

标签： javascript jquery html

我使用以下html制作下拉列表：

<div class="container">
<select id="search-pax" name="pax" class="ls-select ">
  <p>Start the selection</p>
  <option value="1">1 gas <span>1700</span></option>
  <option value="2">2 gaste</option>                    
  <option value="3">3 gaste</option>                    
  <option value="4">4 gaste</option>                    
  <option value="5">5 gaste</option>                    
  <option value="6">6 gaste</option>                    
  <option value="7">7 gaste</option>                    
  <option value="8">8 gaste</option>                    
  <option value="9">9 gaste</option>

  <option value="10">10 gaste</option>              
  <option value="11">11 gaste</option>              
  <option value="12">12 gaste</option>              
  <option value="13">13 gaste</option>              
  <option value="14">14 gaste</option>              
  <option value="15">15 gaste</option>              
  <option value="16">16 gaste</option>              
  <option value="17">17 gaste</option>              
  <option value="18">18 gaste</option>              
  <option value="19">19 gaste</option>              
  <option value="20">20 gaste</option>              
  </select> 
</div>

因此，正如您可以看到here in the html and the running snippet，我尝试在select标记中添加段落标记，尝试设置选项样式并且没有任何效果。

目标是实现像照片一样的东西，我选择一个项目，该项目将转到输入字段。

希望你能提供帮助。

enter image description here

7 个答案:

答案 0 :(得分：2)

我建议您使用optgroup设置所需的元素/标题。 <p>不是<select>下的有效元素。

<div class="container">
<select id="search-pax" name="pax" class="ls-select ">
<optgroup label="Start the selection">
  <option value="1">1 gas <span>1700</span></option>
  <option value="2">2 gaste</option>                    
  <option value="3">3 gaste</option>                    
  <option value="4">4 gaste</option>                    
  <option value="5">5 gaste</option>                    
  <option value="6">6 gaste</option>                    
  <option value="7">7 gaste</option>                    
  <option value="8">8 gaste</option>                    
  <option value="9">9 gaste</option>

  <option value="10">10 gaste</option>              
  <option value="11">11 gaste</option>              
  <option value="12">12 gaste</option>              
  <option value="13">13 gaste</option>              
  <option value="14">14 gaste</option>              
  <option value="15">15 gaste</option>              
  <option value="16">16 gaste</option>              
  <option value="17">17 gaste</option>              
  <option value="18">18 gaste</option>              
  <option value="19">19 gaste</option>              
  <option value="20">20 gaste</option> 
</optgroup>            
  </select> 
</div>

答案 1 :(得分：1)

USE <li> HTML

您好，

如果您想在商品列表中添加任何<ul>标签。最好的方法是使用<li> css结合Jquery和一些$("ul").on("click", ".init", function() { $(this).closest("ul").children('li:not(.init)').toggle(); }); var allOptions = $("ul").children('li:not(.init)'); $("ul").on("click", "li:not(.init)", function() { allOptions.removeClass('selected'); $(this).addClass('selected'); $("ul").children('.init').html($(this).html()); allOptions.toggle(); }); // Check this click evnet - $("body").on("click", "#ddlDemoDropdown li", function() { var selectedValue = $(this).attr('data-value') alert(selectedValue) });技巧来显示为Dropdown

尝试以下示例代码

＆＃13;
＆＃13; 
body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id='ddlDemoDropdown' class="list-unstyled" style="list-style: none;">
    <li class="init" data-value="-1">--SELECT--</li>
    
    <li data-value="value 1">Option 1</li>
    <li data-value="value 2">Here you can add any HTML tags like <input style='width:30px;' type='text' /> Textbox ... ;) </li>
    <li data-value="value 3">Option 3</li>
</ul>
＆＃13; 
click
＆＃13;
＆＃13;
＆＃13;

修改： -

检查以下$("body").on("click", "#ddlDemoDropdown li", function() { var selectedValue = $(this).attr('data-value') alert(selectedValue) }); 事件，我还更新了我的代码段..您现在可以查看

DECLARE @DateStart DATETIME = '2015-01-01'
DECLARE @DateEnd DATETIME = ' 2017-12-31';
WITH Dates AS
(
    SELECT DATEADD(DAY, -(DAY(@DateStart) - 1), @DateStart) AS [Date]
    UNION ALL
    SELECT DATEADD(MONTH, 1, [Date])
    FROM Dates
    WHERE [Date] < DATEADD(DAY, -(DAY(@DateEnd) - 1), @DateEnd)
)
SELECT
MONTH([Date]) AS [Month],
YEAR([Date]) AS [Year]
FROM Dates;

答案 2 :(得分：0)

您可以使用单击时可见的文本框和div。在div内部，您将获得表格数据。它有多少ui日期输入。或者尝试使用jquery，bootstrap等框架......

这确实需要一些css样式。

答案 3 :(得分：0)

使用select2。

而不是使用选择框

请按照以下示例和代码进行操作：

https://select2.github.io/examples.html

这将有助于实现您的目标。

感谢

答案 4 :(得分：0)

您可以使用和自定义此插件。这个插件将有助于提供搜索功能和更多功能。 如何运作 在看到后面会有一个选择html和插件会将其转换为自定义html，你可以根据自己的口味进一步修改和实现样式 https://harvesthq.github.io/chosen/

答案 5 :(得分：0)

根据回答，我在下面的代码段中看到了所需的内容：

http://codepen.io/Sidney-Dev/pen/gWYNVe?editors=1111

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-unstyled" style="list-style: none;">
    <li class="init">--SELECT--</li>
    <li data-value="value 2"><span class="value">Durban</span><span class="numbers">1700</span></li>
    <li data-value="value 3"><span class="value">Durban</span><span class="numbers">1400</span></li>
    <li data-value="value 4"><span class="value">Durban</span><span class="numbers">1200</span></li>
</ul>

CSS：

body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

li{
  display: flex;
  justify-content: space-between;

}
li, ul{
  padding: 0;
  margin: 0;
}

JS：

$("ul").on("click", ".init", function() {
    $(this).closest("ul").children('li:not(.init)').toggle();
});

var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $("ul").children('.init').html($(this).html());
    allOptions.toggle();

    console.log($('.selected .value').text());
});

答案 6 :(得分：0)

以下是html代码中ul和li下拉列表的示例。

＆＃13;
＆＃13; 
$(document).ready(function(){
  $("#input").click(function(){
    $("#selectives").css('display', 'block');
    $("input").css('borderRadius', '2px 2px 0px 0px');
  });


  $(".auswahl").click(function(){
    var das = $(this).html();
    $("#input").val(das);
    $("#selectives").css('display', 'none');
    $("input").css('borderRadius', '2px');
  });

});
＆＃13; 
p {margin: 0px; padding: 0px;}
body {height: 510px; font-family: Arial}
#selectives {height: 10px; position: absolute; top: 32px; left: -32px; display: none;}
#input {position: relative; }
input:hover {cursor: pointer; }
input::-moz-selection {background: white; color: #000}
input {width: 107px; border-radius: 2px; border: 0.1em solid black; -webkit-appearance: none; padding: 5px; font-size: 10px;}
ul {margin-top: 0px;list-style-type: none; text-align: left;}
li {width: 107px; border-color: black black orange black; border-style: solid; border-width: 1px; padding: 5px; border-radius: 0px; font-size: 10px; border-top: 0px;}
li:last-child {border-radius: 0px 0px 2px 2px; border: 1px solid black; border-top: 0px;}
li:first-child {border-radius: 0px; border-bottom: 1px solid orange; border-top: 0px;}
li:hover {background-color: ghostwhite; cursor: pointer;}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input readonly id="input" type="text" value="Dropdown">
<div id="selectives">
  <ul>
    <li class="auswahl">Hello</li>
    <li class="auswahl">This</li>
    <li class="auswahl">Is</li>
    <li class="auswahl">An</li>
    <li class="auswahl">Example</li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题