获取元素内的文本，如果元素包含 select get selected 选项

Question

帖子编辑：使用 MutationObserver 而不是 DOMSubtreeModified

我有一个 div，我使用.each来遍历每个标签并获取它们的文本，但我想添加一个额外的 ifelse 语句，如果标签包含一个选择子项，则将所选选项添加到文本字符串

 $("#droppable").on('click', '.delete', function() { $(this).parent().remove(); // changed - missed "()" }); var target = document.querySelector('#droppable') var observer = new MutationObserver(function(mutations) { var str = ""; $('#droppable label').each(function(){ str += $(this).text() + "<br>"; document.getElementById("inside_drop_zone").innerHTML = str }); }) // configuration of the observer: var config = { attributes: true, childList: true, characterData: true }; // pass in the target node, as well as the observer options observer.observe(target, config);

 #droppable { border: 2px dashed #466683; padding: 1em; min-height: 200px; } #droppable.ui-droppable-hover { background: #bad4ed; } #droppable select { margin: 5px; } .drop_area { border: 1px solid lightgray; padding: 3px; margin-bottom: 3px; width: 100%; } .delete { background: none; border: 0px; color: #888; font-size: 15px; width: 60px; margin: 0px 0 0; font-family: Lato, sans-serif; cursor: pointer; float: right; display: inline-block; } button:hover { color: #CF2323; } #inside_drop_zone { height: 100px; width: 100%; background-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="droppable"> <div class="form-group drop_area"> <label class="control-label" for="one">ONE</label><select id="one-select"> <option value="week1" selected>Week 1</option> <option value="week2">Week 2</option> <option value="week3">Week 3</option> <option value="week4">Week 4</option></select> <button class="delete">Delete</button> </div> <div class="form-group drop_area"> <label class="control-label" for="chg">THREE</label> <button class="delete">Delete</button> </div> <div class="form-group drop_area"> <label class="control-label" for="two">TWO</label><select id="two-select"> <option value="week1" selected>Week 1</option> <option value="week2">Week 2</option> <option value="week3">Week 3</option> <option value="week4">Week 4</option></select> <button class="delete">Delete</button> </div> </div> <div id="inside_drop_zone"></div>

期望输出

标签或标签：选定的选项

ONE + ":" + week 1 
THREE
TWO + ":" + week 3

我对 JQuery 很陌生，所以感谢您提供任何帮助/提示！

Answer 1

查找标记为// changed

 $("#droppable").on('click', '.delete', function() { $(this).parent().remove(); // changed - missed "()" }); $("body").on('DOMSubtreeModified', "#droppable", function() { var str = ""; $('#droppable label').each(function() { const txt = $(this).text() // changed const val = $(this).parent().find("select").children("option:selected").val() // changed - the main idea is to get parent() of $(this) and then search for <select> str += txt + (val ? ":" + val : "") + "<br>"; // changed }) document.getElementById("inside_drop_zone").innerHTML = str });

 #droppable { border: 2px dashed #466683; padding: 1em; min-height: 200px; } #droppable.ui-droppable-hover { background: #bad4ed; } #droppable select { margin: 5px; } .drop_area { border: 1px solid lightgray; padding: 3px; margin-bottom: 3px; width: 100%; } .delete { background: none; border: 0px; color: #888; font-size: 15px; width: 60px; margin: 0px 0 0; font-family: Lato, sans-serif; cursor: pointer; float: right; display: inline-block; } button:hover { color: #CF2323; } #inside_drop_zone { height: 100px; width: 100%; background-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="droppable"> <div class="form-group drop_area"> <label class="control-label" for="one">ONE</label> <select id="one-select"> <option value="week1" selected>Week 1</option> <option value="week2">Week 2</option> <option value="week3">Week 3</option> <option value="week4">Week 4</option> </select> <button class="delete">Delete</button> </div> <div class="form-group drop_area"> <label class="control-label" for="chg">THREE</label> <button class="delete">Delete</button> </div> <div class="form-group drop_area"> <label class="control-label" for="two">TWO</label> <select id="two-select"> <option value="week1" selected>Week 1</option> <option value="week2">Week 2</option> <option value="week3">Week 3</option> <option value="week4">Week 4</option> </select> <button class="delete">Delete</button> </div> </div> <div id="inside_drop_zone"></div>