Find and replace HTML using jQuery

Question

Hi I am looking to find HTML contained on the page and replace it using jQuery.

I have spent hours looking at similar questions on here but I couldn't find any that achieve exactly what I am looking for.

I have the following HTML on my page

<div id="mCSB_1_container" class="mCSB_container" dir="ltr" style="position:relative; top:0; left:0;">
<label class="">
<input type="checkbox" value="blazers">
<span>
Blazers & Waistcoats
<span class="prdctfltr_count">6/8</span>
</span>
</label>
<label class="">
<input type="checkbox" value="coatsjackets">
<span>
Coats & Jackets
<span class="prdctfltr_count">1/3</span>
</span>
</label>
  </div>

And I need a way to say find the following code

<label class="">
<input type="checkbox"

and replace it with

<option class=""

So far all the other questions I have looked at seem to replace the entire tag which loses the value="" attribute I need to keep.

Any assistance would be appreciated.

Edit: I need to end up with something along the lines of the code below but I'm taking it one step at a time

<div id="mCSB_1_container" class="mCSB_container" dir="ltr" style="position: relative; top: 0px; left: 0px;">
<select>
<option class="" value="blazers">
Blazers & Waistcoats
</option>
<option class="" value="coatsjackets">
Coats & Jackets
</option>
</select>
</div>

You *should* replace the entire tags. i.e. replace the existing items, but you should copy across any properties you want to keep for each element. — iCollect.it Ltd, Aug 26 '15 at 13:35
@Stryner yes that's the ultimate aim, I have added the code structure I eventually need to achieve to the original question. — Luke Boobyer, Aug 26 '15 at 13:43
@TrueBlueAussie I did think it might end up having to be something like that. The problem I have is that I can't figure out how to copy the existing properties across for each element. Every question I have come across so far seems to just replace the entire tag without any properties. — Luke Boobyer, Aug 26 '15 at 13:45
Q: Do you want to retain the classes on the label? Blank classes (as shown) are useless, but you may have edited the example. — iCollect.it Ltd, Aug 26 '15 at 14:16

iCollect.it Ltd · Accepted Answer · 2015-08-26T14:52:01.843

2

You should be able to do it with something like this:

var $select = $('<select>');
$('#mCSB_1_container').append($select);
$('#mCSB_1_container label').each(function () {
    var $label = $(this);
    var $input = $label.find('input');
    var value = $input.val();
    var text = $label.text();
    $('<option>').val(value).text(text).appendTo($select);
    $label.remove();
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/yekxrca5/3/

This one is a little long-winded for explanation and can obviously be shortened.

The end result looks like this (reformatted as white-space is not removed):

<div id="mCSB_1_container" class="mCSB_container" dir="ltr" style="position:relative; top:0; left:0;">
   <select>
       <option value="blazers">Blazers &amp; Waistcoats 6/8</option>
       <option value="coatsjackets">Coats &amp; Jackets 1/3</option>
   </select>
</div>

You could of course trim all white-space from the text first.
You also probably want to add a name="" attribute to the select so that you get a selected value posted back to the server.

JSFiddle: http://jsfiddle.net/TrueBlueAussie/yekxrca5/4/

And if you do want to retain the classes from the labels, use:

$('<option>').val(value).attr("class", $label.attr('class')).text($.trim(text)).appendTo($select);

JSFiddle: http://jsfiddle.net/TrueBlueAussie/yekxrca5/5/

Update:

If you want to retain the current check box controls, don't remove() them, just hide() them (they are shown for demonstration only) and update them as the selection changes:

// update the checkboxes to match the selection
$select.change(function(){
    var selection = $(this).val();
    // Now find the matching checkbox by value and change selection
    var $cb = $(':checkbox[value="'+selection+'"]').prop('checked', true);
    $(':checkbox').not($cb).prop('checked', false);
}).change();

JSFiddle: http://jsfiddle.net/yekxrca5/8/

The change() at the very end just triggers a change event at load time, so that the current selection is ticked.

edited Aug 26 '15 at 14:52

answered Aug 26 '15 at 13:49

iCollect.it Ltd

92,391
25
181
202

And OP wants to keep attribute name (and value), 'class' in this case, so this could help, probably: http://stackoverflow.com/questions/2048720/get-all-attributes-from-a-html-element-with-javascript-jquery Not sure that JQuery can handle it... – sinisake Aug 26 '15 at 14:14
@nevermind: An empty `class` is pointless, but I will investigate further what the aim is. Cheers :) – iCollect.it Ltd Aug 26 '15 at 14:15
Yes, you are right... also, 'class' is pretty pointless on 'option' tag anyway... But, i thought that 'class' is just example, that OP wants to get ANY attribute (can be class, alt, title... whatever...that 'dynamic' attribute is in question), but, that was just, obviously, editing mistake. Cheers! :) – sinisake Aug 26 '15 at 14:24
@TrueBlueAussie brilliant thank you for this, it comes out just as I wanted. The blank class was simply because I was looking to retain a similar structure to before. But at present it's not needed. Thank you for going above and beyond what I was expecting. – Luke Boobyer Aug 26 '15 at 14:29
@TrueBlueAussie The only issue is that when you actually select a value it doesn't load anything. As you mentioned I need to pass the selected value to the server. It might be a bit of an ask but is there anyway to do this based on the original structure that was using checkboxes? I want to keep the same functionality of the original checkboxes but just styled in a select drop down box if that makes sense. – Luke Boobyer Aug 26 '15 at 14:42
Done. Give it a whirl. You will not need the `name=""` I added on this one. – iCollect.it Ltd Aug 26 '15 at 14:52
@TrueBlueAussie Thanks this seems like the functionality I am after. Unfortunately it doesn't seem to work on the live site. The select box appears but when you select a value the corresponding checkbox doesn't appear selected. You can see what I mean at the following URL: http://www.lsb9.nopixelleftbehind.co.uk/store/ If you scroll down through Range checkboxes on the left you will find the select box at the bottom. Selecting a value from the box doesn't update the checkbox. Any ideas as to why this might be happening. – Luke Boobyer Aug 26 '15 at 15:32
Ah it could be the fact that the checkbox options on my live site are a multiselect. I'm guessing that would change the code slightly? Sorry for not mentioning that sooner. – Luke Boobyer Aug 26 '15 at 15:36
Multi-select checkboxes are not standard. Are you using a plugin? – iCollect.it Ltd Aug 26 '15 at 16:36
Yes I am using the following plugin http://codecanyon.net/item/woocommerce-product-filter/8514038 – Luke Boobyer Aug 26 '15 at 16:39
I've noticed that when a checkbox is selected it adds a class to it. For example When a value is chosen from a select box if it could add the class prdctfltr_active to the checkbox label I think that might make it update accordingly. – Luke Boobyer Aug 26 '15 at 16:53
If that is all it is, then just update the last part of my code to remove and add that specific class to the matching checkbox. They do apparently offer free support though, so you just need to ask them how to programmatically check the options. – iCollect.it Ltd Aug 26 '15 at 16:54
Like this: http://jsfiddle.net/yekxrca5/10/ Add it to the closest label. I confirmed that that class does make the check visible on your website. – iCollect.it Ltd Aug 26 '15 at 16:58

Find and replace HTML using jQuery

1 Answers1

Update: