如何将文本框值添加到下拉列表

时间:2016-04-14 09:46:13

标签: javascript html

我有一个下拉列表它有一些值和其他选项,当我选择其他选项它显示文本框,我必须输入一些文本,所以我想将该值添加到下拉列表,所以我怎么能解决这个?

  <!DOCTYPE html>
    <html> 
    <head>  
    <script type="text/javascript">
    function CheckColors(val){
     var element=document.getElementById('color');
     if(val=='pick a color'||val=='others')
       element.style.display='block';
     else  
       element.style.display='none';
    }




    </script> 
    </head>
    <body>
      <select name="color" onchange='CheckColors(this.value);'> 
        <option>pick a color</option>  
        <option value="red">RED</option>
        <option value="blue">BLUE</option>
        <option value="others">others</option>
      </select>
    <input type="text" name="color" id="color" style='display:none;'/>
    </body>
    </html>

2 个答案:

答案 0 :(得分:1)

添加一个按钮,获取import javax.ws.rs.container.ContainerRequestContext; import javax.ws.rs.container.ContainerResponseContext; import javax.ws.rs.container.ContainerResponseFilter; import javax.ws.rs.core.MultivaluedMap; import javax.ws.rs.ext.Provider; import java.io.IOException; @Provider public class ResponseCorsFilter implements ContainerResponseFilter { @Override public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext) throws IOException { MultivaluedMap<String, Object> responseHeaders = responseContext.getHeaders(); String origin = requestContext.getHeaderString("Origin"); if (null != origin && (ApplicationConfig.accessControlAllowedOrigins.contains(origin) || ApplicationConfig.accessControlAllowedOrigins.contains("*"))) { responseHeaders.putSingle("Access-Control-Allow-Origin", origin); responseHeaders.putSingle("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE, HEAD"); String reqHead = requestContext.getHeaderString( "Access-Control-Request-Headers"); if (null != reqHead && !reqHead.equals("")) { responseHeaders.putSingle("Access-Control-Allow-Headers", reqHead); } } } } 值以检查它是select还是others /根据它显示按钮。

要添加新元素,请创建pick并将其添加到选择option

x.add(option);

https://jsfiddle.net/7woyyw4h/

答案 1 :(得分:0)

请检查以下代码,希望它对您有所帮助。

<script>
$(document).ready(function(){
    $('#btnAddToBegining').click(function(){
      var data = $("#txtAdd").val();
      $("#ddlList").prepend("<option value='0' selected='selected'>"+ data  +" </option>");
    });

     $('#btnAddToEnd').click(function(){
        var data = $("#txtAdd").val();
        $("<option value='6'>" + data +"</option>").appendTo("#ddlList");
    });       
});
</script>

<select id="ddlList">
  <option value="1">ASP.NET</option>
  <option value="2">C#</option>
  <option value="3">VB.NET</option>
  <option value="4">HTML</option>
  <option value="5">jQuery</option>
</select>

<input type="text" id="txtAdd" />

<br/><br/>
<input type="button" id="btnAddToBegining" Value="Add Item to Begining" />
&nbsp;&nbsp;
<input type="button" id="btnAddToEnd" Value="Add Item to End" />