根據下拉選擇輸入狀態字段

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());
    }
})

希望這可以幫助！