在当前状态下复制DOM元素的HTML源代码

在我的页面上有几个<select> html元素，每个元素都有多个<option>值。我希望在MapBox描述工具包中使用相同的<select>元素，该工具箱期望我将HTML源代码传递到its setHTML method。在当前状态下复制DOM元素的HTML源代码

最简单的方法我现在做的是：

var tableOption = document.getElementById(selectId); 
    var html = tableOption.innerHTML; 
    return "<select>" + html + "</select>";

这工作，但它具有通过原始的HTML源的缺点，因此选择的选项，现在它没有反映。我知道我可以通过value或selectedIndex获得当前选择的选项，并且应该可以解析我已经获取的HTML并删除并将selected属性添加到JS中的相应节点，但是这看起来有点复杂。

是否有一些更简单的方法如何获得一个HTML源代码，该源代码可以用来构造一个select元素的副本，并具有它现在的确切选择状态？

如果可能，我宁愿没有jQuery的解决方案。

来源

2016-11-23 Suma

的可能的复制[jquery的克隆选择犯规保持值]（http://stackoverflow.com/questions/4599773/jquery-clone-select-doesnt-keep-value） – GiuServ

你可以把你的select换成另一个元素。然后你可以通过id来选择它，获得父节点，然后是父节点的innerHTML。如果您想要显示当前选中的option，则可以在其上放置selected属性。

document.getElementById('selectId').addEventListener('change', function() { 
 
    var opts = this.getElementsByTagName('option'); 
 
    for (var i = 0; i < opts.length; i++) 
 
     opts[i].removeAttribute('selected'); 
 
    this.querySelector('option:checked').setAttribute('selected', 'selected'); 
 
    console.log(this.parentNode.innerHTML); 
 
});

<div class="select-wrapper"> 
 
    <select id="selectId"> 
 
    <option>Yes</option> 
 
    <option>No</option> 
 
    </select> 
 
</div>

来源

2016-11-23 14:10:22 Gavin

我在获得innerHTML方面没有问题，通过问题是innerHTML似乎是原始页面源，它似乎并不反映当前的选择。我错了吗？ – Suma

它将是对应于您使用'innerHTML'的元素的所有后代元素的HTML。在这种情况下，我们通过'parentNode'结束了'div'，因此'innerHTML'在'div'内部提供了HTML。这意味着你的包装只能**包含select和它的选项。注意我的例子给出了'select'和'option's的HTML，但不是'div'。 – Gavin

@Suma我想我明白你的意思了。检查我更新的答案。 – Gavin

只是克隆元素，然后设置selectedIndex - 比如事件处理可能不会尽管

复制我知道你问一个简单的解决方案，但我可以”认为那电影不怎么一个简单的考虑，这只是4线小提琴https://jsfiddle.net/s8mb0mxp/2/

HTML

<select id="original"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
</select> 

<button> 
Clone 
</button> 
<div id="target"> 
</div>

$('button').on('click', function(){ 
    var $original = $('#original'); 
    var el = $original.clone(); // Clone the object 
    $('#target').append(el) // Attach the new object to an element 
    el.find('option')[$original[0].selectedIndex].setAttribute('selected', 'selected') 
    console.log(el[0].outerHTML) 
});

来源

2016-11-23 14:22:13 Brian

我也用'withDataAndEvents'和'deepWithDataAndEvents'尝试了clone（），如果用户选择了它们，它们都不会复制selectedIndex。还尝试将节点传递给'Object.create'和'document。createElement'以及调用'$ original.cloneNode'没有运气，想知道是否因为父节点是先创建的，然后单独的选项会使selectedIndex无效 – Brian

我在哪里可以获得所需的HTML源代码？（我可以在Gavin的答案中看到，但在此不能看到）。 – Suma

我使用的HTML包含在答案中 - 我只是使用了一个选择，它的id设置为原始值，而一个带有id target的div是克隆选择的放置位置。小提琴也有一个工作示例 – Brian

在当前状态下复制DOM元素的HTML源代码

回答

相关问题