代码之家 › 专栏 › 技术社区 › miti737

jquery可选:如何在第一次加载时选择项

jquery

miti737 · 技术社区 · 17 年前

我正在使用jquery selectable在.NET ListView中选择项。用户可以选择所需的项目,并通过单击“保存”按钮进行保存。下次当用户进入页面时,他将能够看到以前选择的项目。

使用jquery可选插件,用户可以通过单击来选择项目。

现在我的问题是:

如何在第一次加载时显示现有选定项?
选择项目后,如何从代码隐藏页获取所选项目的值,以便将其保存到数据库?

有什么建议吗?

事先谢谢。

我的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>

2 回复 | 直到 10 年前

Cody Caughlan 17 年前

$('ulselectable') 找到(李) .removeclass('ui-selected') () .find('196600') .addclass('ui-selected');

用户界面选择

好的,所以您似乎只想将CSS类“ui selected”添加到要选择的li(您已存储在db或任何位置)中?这是正确的吗?如果是这样,基本方法是首先从所有元素中删除该类(例如,在上面的HTML中,该类位于第一个li上,但我们要选择的是第二个li)。因此,我们首先从所有li元素中删除它,然后将其添加到所需的元素中。jquery应该是这样的:

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

这假设您选择的是第二个LI,它的DOM ID为“196600”。当然,您可以在页面呈现时替换它。

要在以后获得要存储的值,首先必须知道实际需要的值。它是image-src还是具有“profile-interests-card-itemname”类的DIV值,例如,您想要“builder”或“driver”。让我们假设你想要晚一点。因此,我们的想法是在表单提交中添加一个jquery事件来解析DOM,然后获取所选项目并将其放入一个隐藏的表单字段中,然后将其提交到后端。

假设您的表单有一个dom id为“the_form”,并且您有一个(最初为空的)名为“type”的隐藏表单字段,其id为“job_type”:

$('#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”的字段中传递给您的服务器。

Cody Caughlan 17 年前

要进入第一个加载,您需要使用document.ready函数,该函数在页面和DOM加载后调用,例如

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