jquery UI Multiselect Widget

몇 시간 동안이 위젯 (http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/basic.htm)을 사용하고 있습니다. 위의 링크에서 두 번째 예제와 같이 작동하려면 드롭 다운이 필요합니다. 현재 드롭 다운이 열리고 체크 박스를 클릭하면 자동으로 닫힙니다. 키보드로 드롭 다운의 필드에 액세스 할 수 있으며 Enter 키를 눌러 원하는 옵션을 선택할 수 있습니다. 그러나, 마우스를 클릭 할 때 전체 드롭 다운이 숨기는 옵션을 클릭하십시오. 또한 드롭 다운은 그 아래의 나머지 문의 양식 아래로 떨어집니다. 나는 행운이없는 Z- 색인을 시도했다. 미리 들러 주셔서 고맙습니다.jquery UI Multiselect Widget

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>#attributes.title#</title> 
<META NAME="TITLE" CONTENT="#attributes.title#"/> 
<META NAME="keywords" content="#attributes.keywords#" /> 
<META NAME="description" content="#attributes.description#" /> 
<script type="text/javascript" src="../ddcl/jquery-1.6.1.min.js"></script> 
<link rel="stylesheet" type="text/css" href="/jQuery/Fancy/style.css" /> 
<link rel="stylesheet" type="text/css" href="/jQuery/Fancy/jquery.fancybox-1.3.1.css"> 
<link rel="stylesheet" href="/Themes/PrintCenter/style.css" /> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
<script type="text/javascript" src="../ddcl/jquery.multiselect.js"></script> 
<cfinclude template="/Includes/header_head.cfm"> 
</head>

그리고 HTML

<cfform action="/Task/Form/ProcessForm.cfm" id="print-request-form" method="post"  name="printrequestform"> 
<span>Select Print Material</span> 
    <select name="example-optgroup" multiple="multiple" size="5" id="dropdowns"> 
<optgroup label="Tri-Fold Brochure"> 
    <option value="option1">500 units</option> 
    <option value="option2">1000 units</option> 
    <option value="option3">1500 units</option> 
</optgroup> 
<optgroup label="Group Two"> 
    <option value="option4">500 units</option> 
    <option value="option5">1000 units</option> 
    <option value="option6">1500 units</option> 
    <option value="option7">2000 units</option> 
</optgroup> 
</select><label><span>Full Name:</span> <cfinput class="input-text" maxlength="100" message="Please enter a valid name." name="name" required="yes" size="30" type="text" validate="maxlength"></cfinput></label></cfform>

스크립트

<script type="text/javascript"> 
$("#dropdowns").multiselect({ 
selectedList: 2 // 0-based index 
});</script>

출처

2013-05-07 ac12

그냥 참고로,이 위젯은 미완성이고 패키지의 일부로서 미래 jQueryUI 릴리즈에서 사용할 수 있어야하지만 지금, 그것은 내가 – SpYk3HH

는 빠른 응답 해 주셔서 감사합니다 볼 수 있습니다 꽤 몇 가지 오류가 가득 차 있어요 . 원하는 메뉴 스타일에 대한 다른 제안 사항이 있습니까? – ac12

별로 좋은 옵션은 아니지만'.widget'을 포함 시키려면 jQueryUI 라이브러리가 필요합니다 (링크에 표시되지 않음). 또한 정확한 레이아웃을 보려면 페이지 소스보기 ** – SpYk3HH

아래 코드를 사용해보십시오 : 다음은 내 코드입니다. 나는 당신이 그것을 실제로 볼 수 있도록 예제 Fiddle을 만들었습니다.

페이지의 HTML 코드의 상당수는 다중 선택 JQuery와 선택의 그룹화 순서를 렌더링의 문제에 직접 연결되지 않은, 그래서 아래의 코드에서 그것을 떠난 : 나는 희망

<script type="text/javascript"> 
    $(function(){ 
    $("select").multiselect(); 
    }); 
</script> 

<cfform action="/Task/Form/ProcessForm.cfm" id="print-request-form" method="post"  name="printrequestform"> 
    <h1>Optgroups Example</h1> 
    <h3>ehynds/jquery-ui-multiselect-widget</h3> 
<span>Select Print Material</span> 
    <select name="example-optgroup" multiple="multiple" size="5" id="dropdowns"> 
<optgroup label="Tri-Fold Brochure"> 
    <option value="option1">500 units</option> 
    <option value="option2">1000 units</option> 
    <option value="option3">1500 units</option> 
</optgroup> 
<optgroup label="Group Two"> 
    <option value="option4">500 units</option> 
    <option value="option5">1000 units</option> 
    <option value="option6">1500 units</option> 
    <option value="option7">2000 units</option> 
</optgroup> 
</select><label><span>Full Name:</span> <cfinput class="input-text" maxlength="100" message="Please enter a valid name." name="name" required="yes" size="30" type="text" validate="maxlength"></cfinput></label></cfform>

이것은 당신의 문제와 비슷한 이슈를 가진 다른 사람들에게 도움이된다는 것입니다.

출처

2014-03-08 01:23:50

요소 이름을 확인하십시오. 요소 이름을 여러 개 지정할 때는 배열이어야합니다.

<select name="my_options[]" multiple class="multiselect">

출처

2015-11-24 14:44:42

jquery UI Multiselect Widget

답변

관련 문제