画像のような効果を得るにはどうすればいいですか? 入力フィールドをリストの上に置くことを意味します。 jQueryのプラグインがありますか?このような効果を達成するために、 Select-2 jquery - :選択フィールドの上のテキスト入力
-2
A
答えて
0
0
あなたはこのjQueryプラグインからソリューションを取得します:https://github.com/HemantNegi/jquery.sumoselect
1
あなたはjQueryのを使用して、独自のプラグインを作ることができます。
HTML:
<ul class="nav" role="navigation">
<li class="dropdown"> <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Select<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#"><input type="text" id="other"/></a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a> </li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a> </li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">4 </a> </li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">5 </a> </li>
</ul>
</li>
</ul>
CSS ::
.nav {
margin-left: 0;
margin-bottom: 20px;
list-style: none;
}
ul, ol {
padding: 0;
margin: 0 0 10px 25px;
}
.dropup, .dropdown {
position: relative;
}
.open>.dropdown-menu {
display: block;
}
.nav>li>a {
display: block;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.dropdown-menu .divider {
height: 1px;
margin: 9px 1px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
}
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #333333;
white-space: nowrap;
}
はJQuery ::
$(document).ready(function(){
$('.dropdown-menu input').click(function (e) {
e.stopPropagation();
});
$('.dropdown a').click(function(){
$('.dropdown').addClass("open");
});
$('.dropdown-menu li').click(function(){
$('.dropdown-toggle b').remove().appendTo($('.dropdown- toggle').text($(this).text()));
});
});
+0
私はあなたのコードを試して、助けてくれてありがとう。 – Peter
関連する問題
- 1. 選択フィールドの入力エラー
- 2. jQueryの選択入力テキスト
- 3. テキスト入力の選択コールバック
- 4. Android - フィールドの選択/入力時のフィールドの自動入力
- 5. HTMLテキスト入力フィールドで選択を無効にする方法
- 6. jQuery不一致のテキスト()val()選択と入力の入力
- 7. 選択した選択肢のテキスト入力を更新する
- 8. AngularJS入力フィールドでオプションを選択
- 9. セット入力フィールドを選択変更
- 10. JavaScript変更入力テキスト選択オプション
- 11. 変更和(選択)、数量(テキスト入力)
- 12. 他の選択フィールドの選択に基づいてモデルフォームの選択フィールドを自動入力する
- 13. DoctrineとSymfony - 選択肢フィールドの選択に基づくテキスト入力の変更要求
- 14. テキスト入力フィールドのCSSバグ
- 15. iMacrosのテキスト入力フィールド
- 16. テキスト入力フィールドのアラインメント
- 17. テキスト入力フィールドのラベルニーモニック
- 18. 入力フィールドのバグ - テキストが
- 19. ionic2選択ボックスから他のオプションを選択した場合の入力フィールド
- 20. 選択入力の選択解除
- 21. 画面上の選択領域にテキストを入力する方法は?
- 22. テキスト入力フィールドの説明テキスト
- 23. チェックボックスの選択に基づいて別の入力フィールドを入力する
- 24. 選択ボックスの選択に基づいて入力フィールドを無効にする
- 25. ユーザーの選択に基づいて入力フィールドを表示する(選択)
- 26. ブートストラップ入力グループ選択フィールド、テキストフィールド、検索フィールド
- 27. 入力フィールドまたはテキサライザで選択したテキストを変更する
- 28. Odooウェブサイトのテンプレートの選択フィールドを入力
- 29. IE8選択後のJQuery-UIオートコンプリート入力フィールドのクリア
- 30. ドロップダウンの選択に基づいて入力フィールドを自動入力する
あなたは何を試してみましたか?この例はどうやって思いつきましたか?文脈とは何ですか? – Randy
理解するコードはありません。あなたはそれをアップロードしてくださいできますか? –