Question

我希望找到为每个选中的复选框显示新下拉列表的最佳方法。每当用户检查他们服用某种药物时，就会出现一个带问题的下拉菜单（因此，如果他们选择了四种药物，则应出现四个带下拉菜单的问题）。现在，我有它工作，以便在选中复选框时出现一个隐藏的问题和下拉列表。什么是达到理想结果的最佳方法？

let hiddenMed = document.querySelector('.questionMed');
let hiddenMedQ = document.querySelector(".hiddenQ");
let initialH2 = hiddenMedQ.innerHTML;

//whenever i call the function, whatever is in the parenthesis is going to be known as element within the function
function selectMeds(element) {
    //when you set the variable to element, it enables you to onclick on the thises instead of when you getElementbyId and it only finds the first one
    let checkBox = element;
    //    let checkBox = document.getElementById("medType");
    //    let text = document.getElementById("text");

    if (checkBox.checked == true) {
        hiddenMed.classList.remove("hidden");
        let medName = checkBox.value;
        hiddenMedQ.innerHTML = initialH2 + medName + "?";



    } else {
                let hiddenMed = document.querySelector('.questionMed');
                hiddenMed.classList.add("hidden");
                hiddenMedQ.innerHTML = initialH2;
    }
}

<div class="container question">
        <h2>What kind of medication were you given?</h2>
        <div class="row col-sm-6 medRow1">
            <div class="checkbox">
                <label><input type="checkbox" class="medType" onclick="selectMeds(this)" value="Tylenol">Tylenol</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" class="medType" onclick="selectMeds(this)" value="Celebrex">Celebrex</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" class="medType" onclick="selectMeds(this)" value="Oxycodone">Oxycodone</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" class="medType" onclick="selectMeds(this)" value="Oxycotin">Oxycotin</label>
            </div>
        </div>
        <div class="row col-sm-6 medRow2">
            <div class="checkbox">
                <label><input type="checkbox" class="medType" onclick="selectMeds(this)" value="Dilaudid">Dilaudid</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" class="medType" onclick="selectMeds(this)" value="Tramadol">Tramadol</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" class="medType" onclick="selectMeds(this)" value="Aspirin">Aspirin</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" class="medType" onclick="selectMeds(this)" value="Warfarin/Coumadin">Warfarin/Coumadin</label>
            </div>
        </div>
    </div>
    <!--hidden-->
    <div class="container question questionMed hidden">
        <h2 class="hiddenQ">Did you need a refill of </h2>
        <select class="form-control" id="medAmount">
                <option>Select an Option</option>
                <option>Yes</option>
                <option>No</option>
            </select>
    </div>
    <!--hidden-->

Answer 1

使用此代码。对于每个选中的复选框，此代码会添加新问题及其选项，如果取消选中，则删除该问题。希望这可以帮助你

reset_optimizer = tf.no_op()
with tf.variable_scope('optimizer'):
  train_op = optimizer(learning_rate).minimize(loss)
opt_vars = tf.get_collection(tf.GraphKeys.GLOBAL_VARIABLES, "optimizer")
if len(opt_vars):  # check if optimzer state needs resetting                                                                                          
  reset_optimizer = variables_initializer(opt_vars))

Element.prototype.remove = function() {
  this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
  for (var i = this.length - 1; i >= 0; i--) {
    if (this[i] && this[i].parentElement) {
      this[i].parentElement.removeChild(this[i]);
    }
  }
}

function addDropDown(id, title) {
  var newDD = `<div class="container question questionMed" id="div-${id}">
  <h2>Did you need a refill of ${title}</h2>
  <select class="form-control" id="dorpdown-${id}">
                    <option>Select an Option</option>
                    <option>Yes</option>
                    <option>No</option>
                </select>
</div>`;
  var div = document.getElementById('endOfPage');
  div.insertAdjacentHTML('beforeend', newDD);
}

function removeDD(id) {
  document.getElementById(id).remove();
}

//whenever i call the function, whatever is in the parenthesis is going to be known as element within the function
function selectMeds(element) {
  //when you set the variable to element, it enables you to onclick on the thises instead of when you getElementbyId and it only finds the first one
  let checkBox = element;
  //    let checkBox = document.getElementById("medType");
  //    let text = document.getElementById("text");
  if (checkBox.checked == true) {
    addDropDown(checkBox.value, checkBox.value);
  } else {
    removeDD('div-' + checkBox.value);
  }
}

检查复选框后的新Dropbox

1 个答案: