jQuery的多選小部件不張貼的空當沒有對阿賈克斯選擇使用<a href="http://www.erichynds.com/blog/jquery-ui-multiselect-widget" rel="nofollow">http://www.erichynds.com/blog/jquery-ui-multiselect-widget</a>插件提交

Question

Hieee

上午..

正在使用Yii框架爲我的項目

我有我的觀點近12多選小部件文件如..

<div class="multi_primary" id="one_primary"> 

        <?php 
        $htmlOptions = array('id'=>'relation1','multiple' => 'true'); 
        echo CHtml::dropDownList('PrimaryRelation_2[]',$list_relations,$htmlOptions); 
         ?> 
       </div> 

正在使用AJAX提交提交表單...

當我選擇的東西多選擇小部件和Ajax提交其發佈的價值罰款喜歡

PrimaryRelation_2[] 1,2 

但是當我提交的形式進行選擇多選擇小部件的任何值，它不張貼字段名和值..至少它應該張貼的空值..

告訴我改變什麼，我必須多選擇小部件做什麼也沒有選擇了發佈空值..

謝謝...

Answer 1

我建議你爲multiselect創建一個自定義JSControl。在這個多選控件中，您可以輕鬆處理您的條件。您可以在JqueryUI自動完成文件之後將此JSControlfile添加到Head標籤中。

一旦你創建了一個自定義的JSControl，你只需要在你的頁面上加載這個控件加載到你想要的位置。擴孔部分由控制本身完成。

控制應該是這個樣子：

// Constructor of the control 
function AutoCompleteMultiSelect(controlId,label,containerID,tabIndex){ 
    this.ControlID = controlId; 
    this.Label = label; 
    this.ContainerID = containerID; 
    this.TabIndex = tabIndex; 
    this.RegisteredCallbacks = Object(); 
} 

// function for registering event callback 
AutoCompleteMultiSelect.prototype.RegisterEventCallback = function (event, callback) { 
    this.RegisteredCallbacks[event] = callback; 
} 

    // function to add the control on the given container. 
    AutoCompleteMultiSelect.prototype.AddAutoCompleteMultiSelect = function() 
{ 
     var tabIndex = 'tabindex="' + this.TabIndex + '"'; 
     var controlHTML = '<div>'; 
     controlHTML += '<h2> ' + this.Label+ ' </h2>'; 
     controlHTML += '<div>'; 
     controlHTML += '<span>'; 
     controlHTML += '<input '+ tabIndex +' type="text" id="' + this.ControlID + '" name="' + this.Label+ '" />'; 
    controlHTML += '<input type="hidden" id="' + this.ControlID + '_Value" name="' + this.displayName + '" value="0"/>'; 
    controlHTML += '</span></div></div>'; 

    // Add the control into container 
    $(controlHTML).appendTo('#' + this.ContainerID); 

    var that = this; 

    that.loadLookUp(); 

    $("#" + this.ControlID).blur(function() { 
     if (that.RegisteredCallbacks['onblur'] != undefined) { 
     that.RegisteredCallbacks['onblur'](this.ControlID); 
     } 
    }); 

} 

AutoCompleteMultiSelect.prototype.loadLookUp = function() { 

$("#" + this.ControlID).autocomplete({ 
    minLength: 2, 
    source: function (request, response) { 
     $.ajax({ 
      type: "GET", 
      // your service call 
      success: function (data) { 
       response($.map(data.d, function (item) { 
        return { 
         label: item.Name, 
         value: item.SQLPrimarykey 
        }; 
       })); 
      }, 
      error: function (XMLHttpRequest, textStatus, errorThrown) { 
       // your error come 
      } 
    }, 
    focus: function() { 
     return false; 
    }, 
    select: function (event, ui) { 

     var terms = split(this.value); 

     var length = terms.length 

     if (terms.indexOf(ui.item.label) == -1) { 

      terms.pop(); 

      terms.push(ui.item.label); 

      terms.push(""); 

      this.value = terms.join(", "); 

      var value = this.value.substring(0, this.value.lastIndexOf(',')); 

      $("#" + this.ControlID).val(value); 

      //Handle Values 
      var valuesStr = $("#" + this.ControlID+ "_Value").val(); 

      if (length == 1) { 
       valuesStr = ""; 
      } 

      var values; 

      if (valuesStr != "") { 
       values = split(valuesStr); 
      } 
      else { 
       values = new Array(); 
      } 

      values.push(ui.item.value); 
      values.push(""); 

      valuesStr = values.join(", "); 
      valuesStr = valuesStr.substring(0, valuesStr.lastIndexOf(',')); 

      $("#" + this.ControlID+ "_Value").val(valuesStr); 
     } else { 
      var sv = $("#" + this.ControlID).val(); 
      sv = sv.substring(0, sv.lastIndexOf(',')); 
      $("#" + this.ControlID).val(sv); 

      var valuesStr = $("#" + this.ControlID+ "_Value").val(); 
      valuesStr = valuesStr.substring(0, valuesStr.lastIndexOf(',')); 
      $("#" + this.ControlID+ "_Value").val(valuesStr); 
     } 

     return false; // Prevent the widget from inserting the value.  
    } 
}); 
$("#" + this.ControlID).bind("keydown", function (event) { 
    if (event.keyCode === $.ui.keyCode.TAB && 
       $(this).data("autocomplete").menu.active) { 
     event.preventDefault(); 
    } 
}) 
function split(val) { 
    return val.split(/,\s*/); 
} 
function extractLast(term) { 
    return split(term).pop(); 
} 

}

現在，你可以添加你的HTML頁面的控制。

var control = new AutoCompleteMultiSelect(yourControlID,yourControlLabel,yourContainerName,tabIndexoftheControl); 
control.AddAutoCompleteMultiSelect(); 

您可以添加此控件，儘可能多的時候你想要你的頁面。

當此控件onchange事件觸發並將值和文本設置爲input和hiddenField時。

你可以得到像這樣的價值和文字。

var value = $("#yourControlName_Value").val(); 
var text = $("#yourControlName").val(); 

並將此值用於進一步的使用。

感謝，