§ ITPOW >> 文档 >> JavaScript >> DOM & DHTML

用 ezj 记住上次选择的项，方便下次列表选择

作者：vkvi 来源：ITPOW（原创）日期：2010-12-4

有一个文章管理系统，发表文章时，栏目使用的是 SELECT 下拉列表，没什么问题，但后来栏目越来越多，选择起来就很麻烦，要找很多，可以用 ezj.ext.loc 来定位，但还希望作些扩展，希望记住上次的选择，因为常常选择和上次一样的内容。

<form id="form1">
  <select id="s1">
    <option value="0">a</option>
    <option value="1">b</option>
    <option value="2">c</option>
    <option value="3">d</option>
    <option value="4">e</option>
    <option value="5">f</option>
    <option value="6">g</option>
    <option value="7">h</option>
    <option value="8">i</option>
    <option value="9">j</option>
  </select>
  <input type="submit" value="提交" />
</form>

JavaScript 代码（ezj 代码）

ezj.ready(function(){
    form1.addListener("submit", function(){
        // 当 form1 提交时，将 s1 选择项的文字、值写入 Cookie。
        ezj.cookie.write("s1LastText", s1.sel()[0].text);
        ezj.cookie.write("s1LastValue", s1.sel()[0].value);
    });
    
    // 从 Cookie 读取上次 s1 选择项的文字、值。
    var s1LastText = ezj.cookie.read("s1LastText");
    var s1LastValue = ezj.cookie.read("s1LastValue");
    if (!String.isNullOrEmpty(s1LastValue))
    {
        // 如果上次选择项的值不为空，
        // 则创建一个按钮，单击该按钮就将上次选择的项选中，
        // 并将这个按钮放到 s1 后面。
        var btn = $c("button", { val : s1LastText });
        btn.click(function(){
            s1.sel([s1LastValue]);
        });
        s1.after(btn);
    }
});

我们这里并不是直接选择上次的选择项，而是使用了个按钮，单击按钮才会选择上次的选择项。

官方网站

http://www.itpow.com/tools/downloads/ezj_V2.10.zip

电邮：cftea@126.com