Question

每次用户在下拉菜单中选择一个选项时，我都希望将卡名Main Title更改为2nd Title。

这是我的代码。

HTML：

<h3 id="title" class="card-title">Main Title <span class="badge badge-primary" id="counts">0</span>
  <span class="float-right">
    <a href="" style="color: #c0c6cc;"><i 
    class="mdi mdi-trash-can"></i>
    </a>
    </span>
</h3>
<select class="form-control" id="select" onchange="optionCheck(this);" required>
  <option value="yor1" Option 1 </option>
    <option value="yor2">
      Option 2</option>
    <option value="yor3">
      Option 3</option>
</select>

如果用户选择选项3，则卡的标题将更改。

JS：

function optionCheck(that) {
  if (that.value == "yor3") {
    alert("Title changed!");
    document.getElementById("title").innerHTML = "2nd Title";
  } else {
    document.getElementById("title").innerHTML = "Main title";
  }
}

现在的问题是，如果我选择Option1或Option2，则只有主标题单词可以看到跨度标记，并且图标消失。

Answer 1

这是工作代码：https://jsfiddle.net/usmanmunir/c9uqktn3/19/

HTML

 <h3 id="title" class="card-title">Main Title</h3>
     <span class="badge badge-primary" id="counts">0</span>
      <span class="float-right">
        <a href="" style="color: #c0c6cc;">
        <i class="mdi mdi-trash-can"></i></a>
      </span>
    <br>
    <select class="form-control" id="select" onchange="optionCheck(this);" required>
      <option disabled selected></option>
      <option value="yor1">Option 1</option>
      <option value="yor2">Option 2</option>
      <option value="yor3">Option 3</option>
    </select>

JS

function optionCheck(that) {
  if (that.value === "yor1" || that.value === "yor2" || that.value === "yor3") {
      document.getElementById("title").innerHTML = "2nd Title";
  } else {
      document.getElementById("title").innerHTML = "Main title";
  }
}

Answer 2

您可以将内容放入['A', 10, 1, 'F'] ['B', 10, 2, 'F'] ['C', 10, 3, 'F']中，并将该ID span赋予span标签，以便仅更改span中的内容。

演示代码：

title

function optionCheck(that) {
  if (that.value == "yor3") {
    alert("Title changed!");
    document.getElementById("title").innerHTML = "2nd Title";
  } else {
    document.getElementById("title").innerHTML = "Main title";
  }
}

更改卡的标题而不影响其他元素

2 个答案: