Help with jquery hide with select option

JavaScript
1

I want to use the code here https://codepen.io/SitePoint/pen/mGgDf. But I want to make default Option 1 displayed(instead of Make a Selection) with its content while hiding others. How can I do this? I have deleted Make a Selection which is the default(so far so good) and then Option 1 appears as default but its content remains hidden.How can make the content of Option 1 displayed in default(when page is opened or browser is refreshed)?

2 
  $('.jqueryOptions').hide();

=>

  $('.jqueryOptions').hide();
  $('.opt1').slideDown();
  $(".opt1").addClass('current-opt');
1 Like
3

thanks m_hutley, worked perfectly, glad i joined this forum.

2 Likes
4

hi, i got into another problem with the solution provided above, now i cannot change the select option back to the default when i refresh the browser.

5

Just remove the disabled attribute from that option, and you will be able to select it.

6

hi, i don’t have the disabled attribute in any option, i have selected but i removed it too but same thing. When i refresh the browser, the last opened option shown in the option field, but the content displayed is the default(the first option). I have

<select name="choose" id="choose" class="input-select">
      <option value="a" selected>a</option>
      <option value="b">b</option>
      <option value="c">c</option>
    </select>

for example, when i am currently in b(which is showing b content), and then refresh the page, the option field shows b but the content of a is shown(not b content).
how can solve this?

7

I see the disabled attribute in the HTML codePen of your first post.

      <option value="nul" selected disabled>Make a Selection</option>

That is why I brought it up, because it’s there causing the problem that you commented about.

8

hi,
I have mentioned above that I didn’t use the line class="input-select"> <option value="nul" selected disabled>Make a Selection</option> as provided in the code here https://codepen.io/SitePoint/pen/mGgDf because i want to show the first option(a with its content) as opposed to the “make a selection”.

the content of the of a is displayed when page is refreshed which is what i want but how can i make the default option(a) appear in the select option when the page is refreshed?

9

As we have a conflict in regard to the code that you are currently using, can we please get an up to date version of the HTML+CSS+JS code that you are having trouble with?

10

hi, thanks for looking into this.
here are the codes:
css:

.select-area:after {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid #444;
  bottom: 0;
  content: '';
  height: 0;
  margin: auto;
  pointer-events: none;
  position: absolute;
  right: 8px;
  top: 0;
}

.select-area {
  background-color: #fff;
  border: 1px solid #ccc;
  margin-bottom: 16px;
  padding: 8px 4px;
  position: relative;
}

.input-label {
  cursor: pointer;
  display: inline-block;
  margin-bottom: 8px;
}

.input-select {
  -webkit-appearance: textarea;
  -moz-appearance: window;
  background: none;
  border: 0;
  font-size: .8em;
  font-weight: 300;
  line-height: 1.33333;
  margin: 0;
  overflow: hidden;
  padding-right: 28px;
  padding: 0;
  text-overflow: ellipsis;
  width: 100%;
  width: 110% \9;
  z-index: 2;
}

.options {
  height: 0% ;
  overflow: hidden;
  transition: all .3s;
  visibility: hidden;
}

.jqueryOptions:before,
.options:before {
  content: '';
  display: block;
  height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateY(100%);
  width: 100%;
  z-index: -1;
}

.current-opt:before,
.options:before {
  transform: translateY(0%);
}

.a, .b, .c {
  background: #d6f2e0;
}

.a, .b, .c:before {
  background: #d6f2e0;
}

html:

<div class="select-area">
      <option value="a" selected>a</option>
      <option value="b">b</option>
      <option value="c">c</option>
    </select>
  </div>

js:

  <script>
    $(function() {
  $('.jqueryOptions').hide();
  $('.a').slideDown();
  $(".a").addClass('current-opt');

  $('#choose').change(function () {
    $('.jqueryOptions').slideUp();
    $('.jqueryOptions').removeClass('current-opt');
    $("." + $(this).val()).slideDown();
    $("." + $(this).val()).addClass('current-opt');
  });
});
</script>
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.