0

I've been working with a Wordpress theme that has its limitations and I cant modify the way I want it. I would like to transform the select tag into an input tag.

<div class="rh_prop_search__option rh_prop_search__select price-for-others">
<label for="select-min-price">
    Min Precio    </label>
<span class="rh_prop_search__selectwrap">
    <select name="min-price" id="select-min-price" class="rh_select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true">
        <option value="any" selected="selected">Todo</option><option value="1000">1,000</option><option value="5000">5,000</option><option value="10000">10,000</option><option value="50000">50,000</option><option value="100000">100,000</option><option value="200000">200,000</option><option value="300000">300,000</option><option value="400000">400,000</option><option value="500000">500,000</option><option value="600000">600,000</option><option value="700000">700,000</option><option value="800000">800,000</option><option value="900000">900,000</option><option value="1000000">1,000,000</option><option value="1500000">1,500,000</option><option value="2000000">2,000,000</option><option value="2500000">2,500,000</option><option value="5000000">5,000,000</option>      </select><span class="select2 select2-container select2-container--default select2-container--below select2-container--focus" dir="ltr"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-select-min-price-container"><span class="select2-selection__rendered" id="select2-select-min-price-container" title="Todo">Todo</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
</span>

And I would like to change it, so its goes similiar to the following code:

<div class="rh_prop_search__option rh_mod_text_field rh_min_area_field_wrapper">
<label for="min-area">
    <span class="label">
        Min Area        </span>
    <span class="unit">
        (mts)       </span>
</label>
<input type="text" autocomplete="off" name="min-area" id="min-area" pattern="[0-9]+" value="" placeholder="Todo" title="Only provide digits!">

There is a way to insert a javascript function to do these changes?

Francisco Casas
  • 1

1 Answers1

0

Yes, it is absolutely possible. But it is too long to post in a simple answer.

You need first to select the parent div with document.querySelector('div.rh_prop_search__option.rh_prop_search__select.price-for-others') par example.

Then use the method replaceChild() as mentioned in this answer.

cape_bsas
  • 638
  • 5
  • 13