时间戳

首页 > 解决方案 > 使用 Javascript 将跨度更改为输入

javascript - 使用 Javascript 将跨度更改为输入

问题描述

我一直在使用有其局限性的 Wordpress 主题，我无法修改我想要的方式。我想将选择标签转换为输入标签。

<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>

我想改变它，所以它类似于以下代码：

<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!">

有没有办法插入一个javascript函数来做这些改变？

标签： javascriptwordpress

解决方案

是的，这是绝对可能的。但是发布一个简单的答案太长了。

您需要首先选择div具有document.querySelector('div.rh_prop_search__option.rh_prop_search__select.price-for-others')par 示例的父级。

然后使用此答案replaceChild()中提到的方法。

推荐阅读