jQuery基于特定值来隐藏显示元素的插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库

Example 1 - Simple Single Rule

这个例子使用 test1:0,2 规则来隐藏显示元素。

这个规则指示字段 text1 需要值为 0 或者 2, 使用下面的下拉列表来测试一下结果：

<label for="test1">Test1</label>
<select id="test1">
  <option value="-1">-1</option>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<div visibly="test1:0,2">
  SELECTION MATCHED THE ABOVE RULE!
</div>

SELECTION MATCHED THE ABOVE RULE!

Example 2 - Multiple Rules

这个例子使用 test2:-1,2;test3:1%test2:1;test3:2 规则来隐藏显示元素。

这个例子有两个规则： test2:-1,2;test3:1 和 test2:1;test3:2。如果符合这两个规则，label标签和input输入框将被显示。

When valid selection is made a text field will show, anything entered in here will be removed when invalid option is selected. This happens because visibly was setup with clearOnHide set to true.

The following options are set for this example

options = {
  clearOnHide: true
}

<select id="test2" class="form-control">
  <option value="-1">-1</option>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<select id="test3" class="form-control">
  <option value="-1">-1</option>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<div visibly="test2:-1,2;test3:1%test2:1;test3:2">
  <label for="dummytext">Useless text</label>
  <input type="text" placeholder="whatever you put in here will disappear when field is hidden"/>	
  SELECTION MATCHED THE ABOVE RULE!
</div>

Example 3 - Regular Expression (has value)

这个例子使用正则表达式 ex3t1:^(?=\s*\S).*$ 来作为隐藏显示元素的规则。

这个正则表达式十分简单，只要输入框中有值就可以显示。

The following options are set for this example

options = {
  regularExpression: true
}

<label for="ex3t1">Text</label>
<input type="text" id="ex3t1" />
<div class="row" id="demo3" visibly="ex3t1:^(?=\s*\S).*$" >
  SELECTION MATCHED THE ABOVE RULE!
</div>

SELECTION MATCHED THE ABOVE RULE!

Example 4 - Regular Expression (Number between 1 and 99)

这个例子使用稍微复杂的正则表达式 ex4t1:^(([0-9][1-9])|([1-9][0-9])|[1-9])$ 来作为隐藏显示元素的规则。

输入的值必须在1-99之间元素才会被显示。

The following options are set for this Example

options = {
  regularExpression: true
}

<label for="ex4t1">Text</label>
<input type="text" id="ex4t1" />
<div class="row" id="demo4" visibly="ex4t1:^(([0-9][1-9])|([1-9][0-9])|[1-9])$" >
  SELECTION MATCHED THE ABOVE RULE!
</div>

SELECTION MATCHED THE ABOVE RULE!