How to add dropdown value to span text?

May 1, 2024

I have a page with a dropdown choice box. I would like the value of the option selected to update the text in a span which is also on the same page.

I have tried the following code, which works for text input and radio button selection but it doesn’t seem to work for drop down choice selectors:

<select name="lastcontactmethod" id="lastcontactmethod>" class="text-input"><option value="none" selected disabled hidden>How...</option><optgroup label="Voice Call"><option value="Voice Call">Voice Call</option><option value="WhatsApp Call">WhatsApp Call</option><option value="Facebook Messenger Call">Facebook Messenger Call</option></optgroup><optgroup label="Text Message"><option value="SMS Message">SMS Message</option><option value="WhatsApp Message">WhatsApp</option><option value="Facebook Message">Facebook Messenger</option><option value="Snapchat Message">Snapchat</option><option value="Instagram">Instagram</option><option value="TikTok Message">TikTok</option></optgroup><optgroup label="Other"><option value="Letter / Note">Letter / Note</option></optgroup></select>

<span id="lastcontactmethod-display" class="item-display"> </span>

<script type="text/javascript">
    $('#lastcontactmethod').change(function() {
    var value = $(this).val().replace(/\n/g, '<br/>');
    $("#lastcontactmethod-display").html(value);
});
</script>

>Solution :

You have a typo in your select id:

<select name="lastcontactmethod" id="lastcontactmethod>"

Should be:

<select name="lastcontactmethod" id="lastcontactmethod"

Notice the extra > char in your id name, making it not match your jQuery.

With this character removed, the code works.

$('#lastcontactmethod').change(function() {
    var value = $(this).val().replace(/\n/g, '<br/>');
    $("#lastcontactmethod-display").html(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<select name="lastcontactmethod" id="lastcontactmethod" class="text-input"><option value="none" selected disabled hidden>How...</option><optgroup label="Voice Call"><option value="Voice Call">Voice Call</option><option value="WhatsApp Call">WhatsApp Call</option><option value="Facebook Messenger Call">Facebook Messenger Call</option></optgroup><optgroup label="Text Message"><option value="SMS Message">SMS Message</option><option value="WhatsApp Message">WhatsApp</option><option value="Facebook Message">Facebook Messenger</option><option value="Snapchat Message">Snapchat</option><option value="Instagram">Instagram</option><option value="TikTok Message">TikTok</option></optgroup><optgroup label="Other"><option value="Letter / Note">Letter / Note</option></optgroup></select>
<span id="lastcontactmethod-display" class="item-display"> </span>