输入状态字段取决于下拉选择

Question

需要完成：当用户选择 CA 以外的任何内容时，在我下面的通知中打印所选状态。

    <div class="row mt-3">
        <div class="col-md">
            <label for="resident">I am a resident of:</label>
            <div class="invalid-feedback">
                Select state of residence.
            </div>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-md">
            <div class="alert alert-danger">
                This feature is not available at this time for <b>[State]</b> residents.
            </div>
        </div>
    </div>

这是打印状态的部分：

<option value="<?= $abbr; ?>"><?= $state; ?></option>

根据下拉选择的内容，我如何能够在 [State] 部分内将其打印出来？

Answer 1

正如@Martinho 所说，向<b> 添加一个id 可以更轻松地更改值 - 我还在警告本身中添加了一个，以便您可以轻松隐藏/显示它，以及添加内联样式隐藏加载警告

您可以在 select 上使用 eventListener 来监听 change 事件 - 每次触发事件时，我们将使用 if 语句检查所选值是否为 'CA'，然后更新适当的元素（如果是则隐藏警告，如果不是则以正确的文本显示警告）

document.getElementById('resident').addEventListener('change', function() {
  if (this.value !== 'CA') {
    document.getElementById('stateWarning').style.display = 'block';
    document.querySelector('#stateWarning b#stateName').textContent = this.value;
  } else {
    document.getElementById('stateWarning').style.display = 'none';
  }
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>

<div class="row mt-3">
  <div class="col-md">
    <label for="resident">I am a resident of:</label>
    <select class="custom-select" id="resident" required>
      <option value="">Choose...</option>
      <option value="CA">CA</option>
      <option value="MT">MT</option>
      <option value="TX">TX</option>
      <option value="WA">WA</option>
    </select>
    <div class="invalid-feedback">
      Select state of residence.
    </div>
  </div>
</div>

<div class="row mt-3">
  <div class="col-md">
    <div id="stateWarning" class="alert alert-danger" style="display: none;">
      This feature is not available at this time for <b id="stateName">[State]</b> residents. For more information about our privacy practices, please visit our <a href="<?= $config->get_url('policy'); ?>" target="_blank">privacy policy</a>.
    </div>
  </div>
</div>

Answer 2

你可以简单地使用 JQuery 来实现你想要的。

但首先你应该为你的'b'标签分配一个id来简化代码。让我们假设 id 是“状态”。

$("#resident").change(function(){
    if($(this).val() != 'CA'){
       $("#state").text($(this).val());
    }
})

希望这会有所帮助！