Sunday, 15 August 2010

jquery - Modify function using (this) and next() so can be used with many sets of elements -


The function below dynamically adds content to a multi-select element (in this example the text #newItem has input and added I have been using it for # Example1, and it is based on this.

I am using it on 100 + elements and therefore I would like to modify the function so that the selectors need not to specify for each element Yes. '<'> Use both of the (this) and next () in the past. But this function is slightly more sophisticated compared to what I have done in comparison to earlier and I do not want to modify it to use the same selectors for the entire form.

I Here's an example work done:

JS

HTML

  & lt; Div & gt; & Lt; Input type = "text" id = "newItem" /> & Lt; Input type = "button" id = "add" value = "add" /> & Lt; Label & gt; & Lt; Input type = "checkbox" id = "selected" /> Selected? & Lt; / Label & gt; & Lt; Id = "example 1" name = "example-refresh" class = "multicolored" multi = "multiple" & gt; & Lt; Option value = "foo" & gt; Foo & lt; / Options & gt; & Lt; Option value = "bar" & gt; Bar & lt; / Options & gt; & Lt; / Select & gt; & Lt; / Div & gt;    

Change this one:

  & lt; Input type = "button" id = "add" value = "add" />   

for a class, so we have a common starting point

   Then do:  
  $ (function () {$ ("Add.") (Function () {var el = $ (this Multiselect (), selected = $ (this) .siblings ('label'). ('Input [type =' checkbox "] '), newitem = $ (this) .prev () ('' Input ''), v = newItem.val (), opt = $ ('& lt; option / & gt;', {value: v, text: v}); if (selected.is (': checked ')) {Opt.prop (' selected 'is true);} opt.appendTo (el); el.multiselect (' refresh ');});});    

No comments:

Post a Comment