jQuery selectable：1番目の負荷でアイテムを選択する方法

Question

jQuery selectableを使用して.netリストビュー内のアイテムを選択しています。ユーザーは自分の希望するアイテムを選択して、保存ボタンをクリックして保存することができます。次にユーザがページに来るとき、彼は以前に選択されたアイテムを見ることができる。

jQueryの選択可能なプラグインユーザーを使用すると、アイテムをクリックして選択できます。

は今私の質問は以下のとおりです。

1. 私は第一負荷時に既存の選択項目を表示するにはどうすればよいですか？
2. アイテムを選択した後、コードビハインドページから選択したアイテムの値を取得して、データベースに保存できるようにするにはどうすればよいですか？

ありがとうございます。

私のHTMLマークアップは次のとおりです。

<ul id="ulSelectable" class="ui-selectable"> 
    <li id="196500" class="ui-selectee ui-selected"> 
    <div id="dvItem"> 
     <img id="Interest_lvResult_ctrl0_ctl00_imgInterest" src="Images/Pic1.jpg"/> 
    </div> 
    <div class="Profile_Interests_Card_ItemName"> Driver </div> 
    </li> 
    <li id="196600" class="ui-selectee"> 
    <div id="dvItem"> 
     <img id="Interest_lvResult_ctrl0_ctl01_imgInterest" src="Images/Pic2.jpg" /> 
    </div> 
    <div class="Profile_Interests_Card_ItemName"> Builder </div> 
    </li> 
</ul> 

そして、私のjavascript：

<script type="text/javascript"> 
    var setSelector = "#ulSelectable"; 
    $(function() { 
     $(setSelector).selectable({ filter: 'li' }); 

    }); 
</script> 

Answer 1

$（ '＃ulSelectable'） .find（ 'リー'） .removeClass（ 'UI-選択'） .END（） .find（ '＃196600'） .addClass（ 'ui-selected'）;

UI-選択

オクラホマので、あなただけ追加したいと思われるCSSクラス「UI-選択」（あなたはどこDBかに保存されている）を使用すると、選択したいリーに？これは正しいです？その場合、基本的なアプローチは、すべての要素からそのクラスを最初に削除することです（たとえば、上記のHTMLではクラスは最初のliにありますが、選択したいクラスは2番目のクラスです）。だから私たちは最初にそれをすべてのli要素から削除してから、それを目的の要素に追加します。

$('#ulSelectable') 
.find('li') 
    .removeClass('ui-selected') 
    .end() 
.find('#196600') 
    .addClass('ui-selected'); 

これは、DOM IDが「196600」の第2番目のliを選択していることを前提としています。もちろん、ページのレンダリング時にそれを置き換えることになります。

値を後で取得するには、まず実際に必要な値を知る必要があります。それは画像srcか、それともクラス "Profile_Interests_Card_ItemName"を持つdivの値ですか？ 「Builder」または「Driver」が必要です。あなたは後でしたいと思うことができます。だからあなたのフォームには、あなたのDOMを解析して、選択したアイテムをつかんで隠れたフォームフィールドに入れ、それをバックエンドに送るjQueryイベントをフォームに追加するという考えがあります。

フォームは「the_form」のDOM IDを持っており、あなたは「雇用形態」のIDを持つ「タイプ」と呼ばれる（最初は空）隠されたフォームフィールドを持っているとしましょう：

$('#the_form').submit(function(n) { 
    //grab the LI that is selected 
    var li = $('#ulSelectable').find('li.ui-selected'); 
    //now find the div with our class within this li and grab its inner text 
    var job_type = li.find('div.Profile_Interests_Card_ItemName').text(); 
    //set the hidden field 
    $('#job_type').val(job_type); 
}); 

は今、あなたは持っていますクラス "Profile_Interests_Card_ItemName"の内容と非表示のフォームフィールドがあり、 "type"というフィールドでサーバーに渡されます。

Answer 2

あなたがdocument.readyページの後に呼び出される関数と使用する第一負荷を活用するにはDOM負荷

$(document).ready(function(n) { 
// your code will be executed here after the DOM loads 
});