Question

我真的需要这个网站上的专家帮助。我希望能够添加和构建功能，以便我的自定义UL LI单选框能够处理多个用户选择。这是典型情况，用户按住键盘上的CTRL键并从选择框中选择多个值。这是一个快速的小提琴：http：//jsfiddle.net/c2ezuw24/1/ 这是现有的标记：＆lt;！DOCTYPE html＆gt; ＆LT; HTML＆GT; ＆LT; HEAD＆GT; ＆lt; script src =＆＃34; jquery.min.js＆＃34;类型=＆＃34;文本/ JavaScript的＆＃34;＆GT;＆LT; /脚本＆GT; ＆lt; style type =＆＃34; text / css＆＃34;＆gt; body {font-family：Arial，Helvetica，Sans-Serif;字体大小：0.75em;颜色：＃000;} .dropdown dd，。dropdown dt，。dropdown ul { 保证金：0像素; 填充：0像素; } .dropdown dd { 位置：相对; } .dropdown a，。dropdown a：visited {color：＃816c5b;文字修饰：无;概述：无;} .dropdown a：悬停{color：＃000;} .dropdown dt a：hover，。dropdown dt a：focus { 边界：1px solid rgb（128,128,128）; } .dropdown dt a { 背景：＃e4dfcb url（arrow.png）不重复向右滚动; 显示：块; 填充右：20像素; 边界：1px solid rgb（170,170,170）; 宽度：150像素; } .dropdown dt a span { 光标：指针; 显示：块; 填充：5像素; } .dropdown dd ul { 背景：＃e4dfcb无重复滚动0 0; 边界：1px solid rgb（170,170,170）; 显示：无; 左：0像素; 填充：5px 0px; 位置：绝对的; 顶：2px的; 宽度：汽车; 最小宽度：170像素; 列表样式：无; } .dropdown span.value {display：none;} .dropdown dd ul li a {padding：5px;显示：块;} .dropdown dd ul li a：hover {background-color：＃d0c9af;} .dropdown img.flag {border：none;垂直对齐：中部;保证金左：10px的; } .flagvisibility {display：none;} ＆LT; /风格＆GT; ＆lt; script type =＆＃34; text / javascript＆＃34;＆gt; $（document）.ready（function（）{ $（＆＃34; .dropdown img.flag＆＃34;）。addClass（＆＃34; flagvisibility＆＃34;）; $（＆＃34;。dropdown dt a＆＃34;）。click（function（）{ $（＆＃34;。dropdown dd ul＆＃34;）。toggle（）; }）; $（＆＃34;。dropdown dd ul li a＆＃34;）。click（function（）{ var text = $（this）.html（）; $（＆＃34;。dropdown dt a span＆＃34;）。html（text）; $（＆＃34;。dropdown dd ul＆＃34;）。hide（）; $（＆＃34;＃results＆＃34;）。html（＆＃34;选择的值是：＆＃34; + getSelectedValue（＆＃34; sample＆＃34;））; }）; function getSelectedValue（id）{ return $（＆＃34;＃＆＃34; + id）.find（＆＃34; dt span.value＆＃34;）。html（）; } $（document）.bind（＆＃39; click＆＃39;，function（e）{ var $ clicked = $（e.target）; if（！$ clicked.parents（）。hasClass（＆＃34; dropdown＆＃34;）） $（＆＃34;。dropdown dd ul＆＃34;）。hide（）; }）; $（＆＃34; #flashSwitcher＆＃34;）。click（function（）{ $（＆＃34; .dropdown img.flag＆＃34;）。toggleClass（＆＃34; flagvisibility＆＃34;）; }）; }）; ＆LT; /脚本＆GT; ＆LT; /头＆GT; ＆LT;身体GT; ＆lt; dl id =＆＃34;样本＆＃34;类=＆＃34;下拉＆＃34;＆GT; ＆lt; dt＆gt;＆lt; a href =＆＃34;＃＆＃34;＆gt;＆lt; span＆gt;请选择国家＆lt; / span＆gt;＆lt; / a＆gt;＆lt; / dt＆gt; ＆LT峰; dd＆GT; ＆LT; UL＆GT; ＆lt; li＆gt;＆lt; a href =＆＃34;＃＆＃34;＆gt;巴西＆lt; img class =＆＃34; flag＆＃34; SRC =＆＃34; br.png＆＃34; ALT =＆＃34;＆＃34; /＆gt;＆lt; span class =＆＃34; value＆＃34;＆gt; BR＆lt; / span＆gt;＆lt; / a＆gt;＆lt; / li＆gt; ＆lt; li＆gt;＆lt; a href =＆＃34;＃＆＃34;＆gt;法国＆lt; img class =＆＃34; flag＆＃34; SRC =＆＃34; fr.png＆＃34; ALT =＆＃34;＆＃34; /＆gt;＆lt; span class =＆＃34; value＆＃34;＆gt; FR＆lt; / span＆gt;＆lt; / a＆gt;＆lt; / li＆gt; ＆lt; li＆gt;＆lt; a href =＆＃34;＃＆＃34;＆gt;德国＆lt; img class =＆＃34; flag＆＃34; SRC =＆＃34; de.png＆＃34; ALT =＆＃34;＆＃34; /＆gt;＆lt; span class =＆＃34; value＆＃34;＆gt; DE＆lt; / span＆gt;＆lt; / a＆gt;＆lt; / li＆gt; ＆lt; li＆gt;＆lt; a href =＆＃34;＃＆＃34;＆gt; India＆lt; img class =＆＃34; flag＆＃34; SRC =＆＃34; in.png＆＃34; ALT =＆＃34;＆＃34; /＆gt;＆lt; span class =＆＃34; value＆＃34;＆gt; IN＆lt; / span＆gt;＆lt; / a＆gt;＆lt; / li＆gt; ＆lt; li＆gt;＆lt; a href =＆＃34;＃＆＃34;＆gt;日本＆lt; img class =＆＃34; flag＆＃34; SRC =＆＃34; jp.png＆＃34; ALT =＆＃34;＆＃34; /＆gt;＆lt; span class =＆＃34; value＆＃34;＆gt; JP＆lt; / span＆gt;＆lt; / a＆gt;＆lt; / li＆gt; ＆lt; li＆gt;＆lt; a href =＆＃34;＃＆＃34;＆gt;塞尔维亚＆lt; img class =＆＃34; flag＆＃34; SRC =＆＃34; cs.png＆＃34; ALT =＆＃34;＆＃34; /＆gt;＆lt; span class =＆＃34; value＆＃34;＆gt; CS＆lt; / span＆gt;＆lt; / a＆gt;＆lt; / li＆gt; ＆lt; li＆gt;＆lt; a href =＆＃34;＃＆＃34;＆gt;英国＆lt; img class =＆＃34; flag＆＃34; SRC =＆＃34; gb.png＆＃34; ALT =＆＃34;＆＃34; /＆gt;＆lt; span class =＆＃34; value＆＃34;＆gt; UK＆lt; / span＆gt;＆lt; / a＆gt;＆lt; / li＆gt; ＆lt; li＆gt;＆lt; a href =＆＃34;＃＆＃34;＆gt;美国＆lt; img class =＆＃34; flag＆＃34; SRC =＆＃34; us.png＆＃34; ALT =＆＃34;＆＃34; /＆gt;＆lt; span class =＆＃34; value＆＃34;＆gt; US＆lt; / span＆gt;＆lt; / a＆gt;＆lt; / li＆gt; ＆LT; / UL＆GT; ＆LT; / DD＆GT; ＆LT; / dl的＆GT; ＆lt; span id =＆＃34;结果＆＃34;＆gt;＆lt; / span＆gt; ＆LT; /体＆GT; ＆LT; / HTML＆GT;

Answer 1

使用内置的html功能。 http://jsfiddle.net/2v8foz90/

<select multiple>
  <option value="DEDE">Hello</option>
  <option value="FEFE">bonjour</option>
  <option value="SESE">Ciao</option>
  <option value="AEAE">hallo</option>
</select>

将UL LI单选框转换为多选框

1 个答案: