Question

我知道这个问题以前一定得到了回答，但我无法在任何地方找到它。

我有一个包含<select>个选项列表的表单，所有这些选项都有我选择的默认值。这个表单是叠加的，我希望它作为用户的设置菜单。一切正常，但如果您打开叠加层，选择您的选项，然后关闭叠加层并再次打开它，选择将恢复为原始默认值。

我想在关闭叠加层的按钮上添加一个.onclick函数，该叠加层会将用户输入保存为新的默认值，但我不知道如何执行此操作，甚至不知道哪些标记属性可用用于此类用途。

另外，由于我没有使用jquery的经验，我更愿意，如果解决方案只使用javascript，除非这被认为是这类问题的不良做法，在这种情况下我将开始学习jquery。 / p>

以下是代码段：

＆＃13;

function saveRuleSelections() {
  //add function here to save new default values					
  closeRulesOverlay();
}

function closeRulesOverlay() {
  document.getElementById("rules_overlay").style.display = "none";
}

＆＃13;

<form>
  <h2>Current Rules</h2>
  <p>Number Of Decks:
    <select>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6" selected>6</option>
    </select>
  </p>
  <p>Dealer Hits Soft 17:
    <select>
      <option value="yes">Yes</option>
      <option value="no" selected>No</option>
    </select>
  </p>
  <button id="select_rules_button" onclick="saveRuleSelections()">Select Rules</button>
</form>

＆＃13;

Answer 1

如果是Javascript，然后添加＆＃34;选择＆＃34;在选项内作为属性。

<option value="options1" selected>Audi</option>

W3School Selected option Example

Answer 2

而不是使用onclick函数使用下面的代码

$(document).ready(function () {
    $('#select_rules_button').click(function(){
        //add function here to save new default values                  
        document.getElementById("rules_overlay").style.display = "none";

    });
});

从按钮控件中删除onclick功能

<button id="select_rules_button">Select Rules</button>

感谢。

Answer 3

您不应该在HTML代码中使用selected

希望它充当设置

因此，您需要在javascript中使用变量，例如var setting = {numberOfDecks : 6, dealerHitsSoft : "No"};

当文档准备就绪时，使用该变量设置默认选择的选项但是，设置最好存储在数据库或cookie中。

＆＃13;

var setting = {numberOfDecks : 6, dealerHitsSoft : "no"};

$(document).ready(function () {
  $("#numberOfDecks").val(setting.numberOfDecks);
  $("#dealerHitsSoft").val(setting.dealerHitsSoft);

});

function saveRuleSelections() {
  //add function here to save new default values	
  saveSetting(setting);
  closeRulesOverlay();
}

function closeRulesOverlay() {
  document.getElementById("rules_overlay").style.display = "none";
}

function saveSetting(){
   setting.numberOfDecks =  $("#numberOfDecks").val();
  setting.dealerHitsSoft =  $("#dealerHitsSoft").val();
  console.log(setting);
}

＆＃13;

<form>
  <h2>Current Rules</h2>
  <p>Number Of Decks:
    <select id="numberOfDecks">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
    </select>
  </p>
  <p>Dealer Hits Soft 17:
    <select id="dealerHitsSoft">
      <option value="yes">Yes</option>
      <option value="no">No</option>
    </select>
  </p>
  <button id="select_rules_button" onclick="saveRuleSelections()">Select Rules</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

＆＃13;

你如何让用户在html中选择select标签的默认值？

3 个答案: