如何添加下一个选择标签

我需要添加接近button清除选择元素select标签，以及我需要做dropdown像button如下图像按钮如何添加下一个选择标签

这里是我的HTML代码：

<div class="form-group"> 
    <label for="sel1">Select Asset:</label> 
    <select class="form-control" id="assetCategory"> 
     <option value="" selected disabled>Select Asset</option> 
     <option value="1">Asset 1</option> 
     <option value="2">Asset 2</option> 
     <option value="3">Asset 3</option> 
     <option value="4">Asset 4</option> 
    </select> 
</div>

我该怎么做？或者是不可能做到的？

来源

2017-08-30 Udara

请分享你的代码，到现在无论你都试过了。 – Shiladitya

我正在投票关闭这个线程，因为没有给出任何代码 – Ivan

@Ivan我会用我到目前为止所做的更新代码 – Udara

您必须按照它在图像上显示的方式标记select标记。取消按钮必须是一个单独的HTML标记，而不是必须单独设置样式并放置在选择旁边。

你的HTML会是这个样子：

<select> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
</select> 
 
<button>X</button>

来源

2017-08-30 12:30:35

可以使用引导和JQuery轻松做到这一点。然而，如果你选择其他的东西，逻辑仍然是一样的。检查下面的代码片段：

$("#clear_addon").on("click", function(){ 
 
    $("#target_select").val(""); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="input-group"> 
 
    <select class="form-control" id="target_select"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    </select> 
 
    <span class="input-group-addon" id="clear_addon">Clear</span> 
 
</div>

来源

2017-08-30 12:30:45

我需要一个'按钮'到'选择'标签不是'输入'标签 – Udara

抱歉，没有注意到那。更新我的答案 –

是否可以更改选择（箭头）按钮？ – Udara

尝试类似如下：

$("#clear_addon").on("click", function(){ 
 
    $("select").val(""); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="input-group"> 
 
    <select class="form-control" aria-describedby="clear-addon"> 
 
    <option></option> 
 
    <option>option1</option> 
 
    <option>option2</option> 
 
    </select> 
 
    <span class="input-group-addon" id="clear_addon">&#10006;</span> 
 
</div>

来源

2017-08-30 12:36:44

有些难看，但它可能给一个想法看起来

$("button").click(function(){ 
 
$("#a").val(''); 
 
});

select { 
 
    width: 200px; 
 
    border: 1px solid #ccc; 
 
} 
 

 
button { 
 
    position:fixed; 
 
    left:158px; 
 
    padding: 0px; 
 
    width: 50px; 
 
    background-color:white; 
 
    border: 1px solid #ccc; 
 
} 
 
div select, button{ 
 
    height:20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <select id="a"> 
 
    <option value="a">a</option> 
 
    <option value="c">b</option> 
 
    <option value="c">c</option> 
 
    </select> 
 
    <button>remove</button> 
 
</div>

来源

2017-08-30 13:03:08

如何添加下一个选择标签

回答

相关问题