We Keep Coding

With select2, how to access the original select/input element after it's been processed?

I'm using a combination of JQuery EasyUI and Select2 to be able to drag options from a right panel, onto a left select box.
In the original HTML, the select boxes are empty, and I only "add" anything to them if I drop an option on them,
<form id="section1">
<select class="select2" class="drop_target" id="selected_options" name="selected_options"></select>
<div>
<div class="draggable_option" data-id="1234">1234</div>
</div>
</form>
<form id="section2">
<select class="select2" class="drop_target"></select>
<div>
<div class="draggable_option" data-id="1235" id="selected_options" name="selected_options">1235</div>
</div>
</form>
Then in javascript, I do something like this,
$('.drop_target').droppable({
accept: '.draggable_option',
onDrop:function(e, source){
var $dragged_source = $(source);
var $drop_target = $(this);
}
});
The problem comes at this point, if you're dynamically adding things to the select, you have to check it doesn't exist, and if it doesn't, you create a new option, and add it,
var new_option = {
id: $drag_source.data('id'), data_id: $drag_source.data('id'),
text: $drag_source.val(), selected: true};
// Set the value, creating a new option if necessary
if (!$drop_target.find("option[value='" + new_option.id + "']").length) {
// Append it to the select
$drop_target.append(new Option(
new_option.text, new_option.id, true, true)).trigger('change');
}
var data = $drop_target.select2('data');
$drop_target.select2('data', data.concat([new_option]));
Clear as mud? Unfortunately it goes wrong at this point. While all calls to .select2 from $drop_target work as expected, this is not the select that was originally in the HTML, this is a div that select2 created, after hiding the original select, with an id attribute like id="s2id_selected_options". So when we append the new option to it, it doesn't get added to the select, and gets added to select2's div incorrectly instead.
My HTML pseudocode is deliberately set up in this "obtuse" way, because my page is like that. I have multiple forms, and multiple "identical" selects in those forms, generated by WTForms. So the "general" method of selecting your select by id, $('#selected_options') doesn't work correctly.
What I need to do, within the javascript, is gain access directly to the original, now hidden, select, and I can't access it via id.

When you have access to one of the elements that's "associated" with the generated by select2, you can access meta information for it via .data('select2'), or in this instance,
$(this).data('select2');
In here, there's loads of metadata that select2 uses (which you can see if you browse the source). For this question, to get the original select or input element, you can use,
var $drop_target = $(this).data('select2').opts.element;
Whether you're using a select, or an input, this gives you a jQuery element linking to it. If you're using a select, and are only interested in that, you can use the shorter option,
var $drop_target = $(this).data('select2').select;
This may be in the docs somewhere, but I was unable to find it, and I'm also not able to find it by searching now, because searching the docs for "data" and "select2" returns a result for nearly every page of their docs (hence the reason I'm answering this question myself, to hopefully save others the trouble).

Jquery get Checkbox in span

I have some jquery code where I am trying to select a checkbox when the user clicks on a div. My fiddle is below:
http://jsfiddle.net/5PpsJ/
What i have come up with is this, but it is not selecting the checkbox inside of the span:
$('span[name="' + current + '"]').closest('input:checkbox[id="CB_Selected"]').prop('checked', true);
The full code is in the link
My question is how can i get the select box inside of the span based on its unique name and select it?
n.b I have commented out the hide functio0n in jquery to visually see whether the checkbox is selected or not
EDIT
My ID's are the same because I am working inside of ASP.NET and using a repeater to create the HTML shown in the fiddle. Inside of Repeaters I can not set the ID of item as the Repeater control does not allow me to set the ID with Eval(datasource)

IDs are unique. All you need is this:
$("#CB_Selected").prop('checked', true);
Actually, you don't even need jQuery:
document.getElementByID('CB_Selected').checked = true;
As others have pointed out, it would be preferred to use a class rather than an ID if there are multiple checkboxes. In addition, an input cannot have children, so the closest function won't work; did you mean find (for children) or siblings?

Instead of giving several checkboxes the same ID -- which invalidates your html -- use a class on the checkboxes. Change:
<input id="CB_Selected" type="checkbox" name="ctl00$ContentPlaceHolder_Content_Wraper$ctl01$Repeater_Selected$ctl00$CB_Selected" />
To:
<input class="CB_Selected" type="checkbox" name="ctl00$ContentPlaceHolder_Content_Wraper$ctl01$Repeater_Selected$ctl00$CB_Selected" />
Then you can use the code:
$('#s_' + this.id).find(':checkbox.CB_Selected').prop('checked', true);

Getting and passing parent info to hidden form

In a WordPress plugin (called postRatings) when a user presses a nested image he adds a "like" to the page. I want to pass that info to a hidden form.
So when user clicks the img (that's what triggers the plugin functionality), I want to get the serial number that is in the parent span of that image, and pass it as a value to my hidden form input.
Thing is the serial number is displayed at the end part of the parent span id name. I wrote it in the HTML code below as “XXXX”.
I am trying to get that number (only) and pass it to the value of my hidden input. I started writing the JavaScript code but don't know how to continue.
HTML:
<span id="post-ratings-XXXX" class="post-ratings">
<img class="post-ratings-image" src="1_on.gif">
</span>
<form>
<input type="hidden" id="supportedCheck" name="supportedCheck" value="#"
maxlength="19"/>
</form>
JavaScript
$('.post-ratings-image').click(function(){
$('#supportedCheck').val ......?
});

You can use the following
$('.post-ratings-image').click(function(){
$('#supportedCheck').val($(this).parent('span')[0].id.split('-')[2]);
});
Fiddle Demo

You could use following snippet:
$('.post-ratings-image').click(function () {
$('#supportedCheck').val($(this).closest('span[id]')[0].id.split('-').pop());
});

Instead of adding the serial number to the id tag, consider to add it as a data tag. This is JQuery's way of working with data through HTML tags (see docs). You can set it this way:
<span data-serial-number="XXXX" class="post-ratings">
And access it this way:
$('.post-ratings-image').click(function(){
var span = $(this).parent();
var serial = span.data('serial-number');
span.find('input:hidden').val(serial);
});

Search through an HTML Table and find text fields with required classes

I'm creating a validation script for a multi-step form, each group is inside a table and I want to check that the containing table has a required field inside it.
I've tried to implement this as below:
(where a = table id
.required = class, but the classes are like class = "something required")
function validForm(a) {
var myVar = $('a').find('.required').val();
alert(myVar);
}
the problem is that this code returns undefined. This is my first time using a .find function and I am having a hard time understanding how to use it.
HTML:
<table id = "default">
<tr><td>Default</td></tr>
<tr><td>Field name</td><td><input type="text" name="first_name" maxlength="35" class="txtfield-cu1 required" title="First Name"></td></tr> <- repeat a couple of times

if a is the table id, you will need to select by $('#a') instead of $('a').
In jQuery selection (and CSS) '#a' selects the tag with id = 'a', whereas a selects the <a> tag.
Edit: if a here stands for a variable that represents the id of the table, then you can use
$(a) to select it.
Edit 2: jsfiddle link

Try $("#a") to select by ID and not by tag name.

Removal of multiple fields and labels

I'm very new to jQuery and have been stumped by particular issue. I am dynamically adding 2 checkbox fields to a screen form using the code below:
var summon_search = "<br><br><br><label for='summon_search'>Search this resource from compatible products*</label><input type='checkbox' id='summon_search' >";
var summon_link = "<br><br><label for='summon_link'>Link direct from content items in compatible products*</label><input type='checkbox' name='summon_link'>";
$(summon_search+summon_link).insertAfter("#jstor_selection");
However I have had limited success when I want to remove these fields AND labels (which is dependant on another value) and replace them with new fields. The code below shows my best attempt so far. It does appear to remove the labels and first field, but for some reason the last field remains. Could someone please advise if they can spot anything I've done wrong, or perhaps supply a better example of handling this ?
if ($("#summon_search").length > 0 ) {
//Removal of Label and Field (Attempted)
$("label[for=summon_search]").remove();
$("label[for=summon_link]").remove();
$("#summon_search").remove();
$("#summon_link").remove();
Any feedback much appreciated.

Change name='summon_link' to id='summon_link', because #summon_link expects an id.

if you see your code the summon_link variable give it a id instead of name like in the summon_search variable
name=summon_link change it to id='summon_link'

if your intention is to add these HTML string after object with Id 'jstor_selection', you can use like this
$("#jstor_selection").append(summon_search+summon_link);

you should give the for= value in quotes.
EDIT: to remove extra <br>, normally it is suggested not to use <br>
$("label[for='summon_search']").prev('br').remove()
$("label[for='summon_link']").prev('br').remove()
$("label[for='summon_search']").remove();
$("label[for='summon_link']").remove();
also in the suman_link input element you have given as name
<input type='checkbox' name='summon_link'>
either change this to
<input type='checkbox' id='summon_link'/>
or
$("#summon_link").remove();
to
$("input[name='summon_link']").remove();