jQuery - 使用选择和选项输入，更好的方法？答案

【问题标题】：jQuery - input with a select & options, better way?jQuery - 使用选择和选项输入，更好的方法？
【发布时间】：2016-12-21 12:20:37
【问题描述】：

首先，看看我的小提琴：my Fiddle

有没有更简单的方法？

我的方法很好，但我还不开心:)

javascript

$(document).ready(function(){
        $("#input").click(function(){
            $("#selectives").css('display', 'block'); // displays block "div #selectives" underneath
            $("input").css('borderRadius', '2px 2px 0px 0px'); // not that important.. just css
        });


        $(".auswahl").click(function(){ // .auswahl (every li element)
            var thisWord = $(this).html(); // thisWord = the word u want to get the value of
            $("#input").val(thisWord); // puts the value of "thisWord" into the #input
            $("#selectives").css('display', 'none'); // immediately if you click an li element, it should disappear
            $("input").css('borderRadius', '2px'); // not that important.. just css
        });

    });

【问题讨论】：

标签： jquery input options

【解决方案1】：

这个怎么样？

$(document).ready(function(){
  var input = $("#input");
  var list = $("#selectives");
        input.click(function(){
            list.toggle(); // displays block "div #selectives" underneath
            input.toggleClass('open'); // not that important.. just css
        });


        list.on("click", "li",function(){ // .auswahl (every li element)
            input.val($(this).text()); // puts the value of "thisWord" into the #input
            list.toggle();
            input.toggleClass('open');
        });

    });

css:

.open{
  border-radius: 2px 2px 0px 0px;
}

分叉：https://jsfiddle.net/q7jg1e0a/2/

我认为最好将元素保存到变量中。因此，您不必每次都查找它。（可能会减慢您的脚本速度。特别是如果您有大型 DOM）。

而且我认为使用类比在代码中操作 css 更好。在 css 中的一个地方更改它然后在代码中查找它更容易。

此外，如果您只打开和关闭，您可以使用切换，它会为您找出状态的艰苦工作。在您的代码中不需要超大...

【讨论】：

非常感谢您的反馈！我现在会尝试使用更多的变量和类。

【解决方案2】：

回答有点晚了，但还是把它贴出来而不是马上扔掉：D。与公认答案的推理大致相同，只是有一个单独的显示/隐藏函数（代码中的 cmets）

$(function(){
	var selectives =$("#selectives"), input = $("#input").click(showHide);
  function showHide(){ //single function for the show/hide behaviour
  	selectives.toggle(); //show/hide the selectives block
    input.toggleClass('droppedDown');  //put the alternate style in a css class and toggle that
  }			
 	selectives.find('li').click(function(){ //every li element inside the selectives div. (Negating the need for the auswahl class)
      showHide();			
      input.val($(this).text());
	});
});

		body {height: 510px; font-family: Arial}
		#selectives {height: 10px; position: absolute; top: 31px; 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; background-image:url(https://image.freepik.com/freie-ikonen/doppelpfeil-ios-7-schnittstelle-symbol_318-35368.jpg); -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;}
    
 .droppedDown{border-radius: 2px 2px 0px 0px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input readonly id="input" type="text" value="Standard"> <!-- readonly = not being able to write -->
	<div id="selectives">
		<ul>
			<li>1</li> 
			<li>2</li>
			<li>3</li>
		</ul>
	</div>

【讨论】：