javascript - 获取元素内的文本，如果元素包含 select 获取选定选项

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

查找标记为//已更改的行

$("#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>