I am trying to create a select dropdown list with multiple options, and after clicking on the option, the selected value should be displayed with expected styling and then the dropdown list will disappear. If clicking on the "X" button of the result box, the result box should disappear and the dropdown list should show again.

I have tried to write my script as following:

JSFiddle

While I am trying to use

if ($(promo).length > 0)

to prove the existence of the selected option, I still got O from console and I am now getting stuck at this point which I can't get the desired result.

Does anyone can share some opinion on it and tell me what to do? Thank you so much for your time to read this question. Regards.

I am trying to create a select dropdown list with multiple options, and after clicking on the option, the selected value should be displayed with expected styling and then the dropdown list will disappear. If clicking on the "X" button of the result box, the result box should disappear and the dropdown list should show again.

I have tried to write my script as following:

JSFiddle

While I am trying to use

if ($(promo).length > 0)

to prove the existence of the selected option, I still got O from console and I am now getting stuck at this point which I can't get the desired result.

Does anyone can share some opinion on it and tell me what to do? Thank you so much for your time to read this question. Regards.

• javascript
• jquery
• html
• css
• select

Share Improve this question Follow asked Oct 13, 2017 at 16:28 SammiSammi 26188 silver badges2121 bronze badges 1

• Where should the value of the selected option be displayed, in <div id='selectedPromo'>? – Tom O. Commented Oct 13, 2017 at 16:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Here is a working fiddle. There are several things to note:

• You should use the change event rather than click, so keyboard navigation will appropriately trigger the events as well.
• There were several reference errors
• There were several typos, wrong selectors in your fiddle. For example, you wrote $("selected-promo") without a period (.), resulting in a by element type selection. $(".selectPromo").css({"display":"none"}); refers to the select element, whose class is actually select-promo, etc. Pay attention to how you name things, and be consistent with names, because this is the perfect recipe for such hard to find, yet trivial bugs. For example, you are mixing camelCase and kebab-case. Pick one and stick to it, and watch out for selector operators, such as . and #.
• Your fiddle didn't contain the jQuery reference and its script execution needed to be set to onDomReady.

you're actually not even able to trigger anything when changing your selection in your dropdown. Change it to $("#selectPromo").on("change",function(){ //your code }

I used vanilla JavaScript to write what I think should acplish what you're trying to do. I didn't see anything regarding styling in your code. I added a few id attributes in your HTML:

function init() {
  var selectElement = document.getElementById('selectPromo');
  document.getElementById('btnDelete').style.display = 'none';

  selectElement.addEventListener('change', function() {


    document.getElementById('selectedPromo').innerHTML = selectElement.options[this.value].text;

    document.getElementById('inputField').style.display = 'none';

    document.getElementById('add-layout').style.display = 'inline';
    document.getElementById('btnDelete').style.display = 'inline';
  });

  document.getElementById('btnDelete').addEventListener('click', function() {
    selectElement.value = '';
    document.getElementById('inputField').style.display = 'inline';
    document.getElementById('add-layout').style.display = 'none';
    document.getElementById('selectedPromo').innerHTML = '';
  });
}

init();

<div class="coupon-group">
  <div class="left">
    <div class="input-field" id="inputField">
      <div class="title">Select promotion</div>
      <div class="select-group">
        <select class="select-promo" id="selectPromo">
          <option value="">Please choose:</option>
          <option value="1" data-name="OfferA">Offer A</option>
          <option value="2" data-name="OfferB">Offer B</option>
          <option value="3" data-name="OfferC">Offer C</option>
          <option value="4" data-name="OfferD">Offer D</option>
        </select>
      </div>
    </div>
  </div>
  <div class="right"></div>
</div>
<div class="selected-promo" id="selectedPromo"></div>

<div class="hidden-content" id="add-layout">
  <div>
    <span class="btn-delete" id="btnDelete">X</span>
    <span class="name"></span>
    <input type="hidden" name="coupon_type[]" value="">
    <input type="hidden" name="coupon_value[]" value="">
  </div>
</div>