Something is wrong with my html combobox code. It is not working!

Ciodensky · December 21, 2021

Site URL: https://www.xystema.com/pricing/#page-section-61a215ff3b53df1223d55072

Hi, I am trying to create an html combobox with my code below. I am having difficulty to effect the "Select" script—it is not working.

Could anyone help me figure out what I was missing in the code? I am sure there is...

Website link: https://www.xystema.com/pricing/#page-section-61a215ff3b53df1223d55072

Password: 030774

<div class="industrial">
  <select class="industry" id="industry">
    <option value="fixer">fixer</option>
    <option value="booster">booster</option>
  </select>
</div>

<script>
$('.fixer').ready(function() {
    $('#block-yui_3_17_2_1_1638012322305_113084').show();
    $('#block-yui_3_17_2_1_1638012322305_166770').hide();
});    
$('.fixer').select(function() {
    $('#block-yui_3_17_2_1_1638012322305_113084').show();
    $('#block-yui_3_17_2_1_1638012322305_166770').hide();
});
$('.booster').select(function() {
    $('#block-yui_3_17_2_1_1638012322305_113084').hide();
    $('#block-yui_3_17_2_1_1638012322305_166770').show();
});
</script>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<style>
.industrial{text-align:center;border-radius:6px;width:185px;display:flex;flex-flow:row wrap;align-items:center;margin:auto;box-sizing:border-box;padding-bottom:35px}
.industry{font-family:Lato;font-weight:400;font-style:normal;font-size:.7rem;text-align:center;letter-spacing:0.0em;vertical-align:middle;width:50%;height:35px;}
</style>

tuanphan · December 25, 2021

Fixer & booster in your HTML code aren't class name. So you can't use $('.fixer')

The code should be

$('[value="fixer"]').ready(function() {

not

$('.fixer').ready(function() {

Ciodensky · December 30, 2021

On 12/25/2021 at 4:11 PM, tuanphan said:
Fixer & booster in your HTML code aren't class name. So you can't use $('.fixer')

The code should be
$('[value="fixer"]').ready(function() {
not
$('.fixer').ready(function() {

Thanks for this @tuanphan but it didn't work actually. I got another code that works I will share it here. Yours supposed to be clean and simple.

Ciodensky · December 30, 2021

Here's the code that works for me:

<div class="industrial">
  <select class="industry" id="selection">
    <option value="SEL">Select industry</option>
    <option value="RET">Retail or Online Commerce (2.5 mos)</option>
    <option value="DIS">Wholesale or Distribution(3 mos)</option>
    <option value="CON">Contractor (3.5 mos)</option>
    <option value="MAN">Manufacturing (4 mos)</option>
    <option value="GEN">General Business (3 mos)</option>
    <option value="PRO">Professional Services (2.5 mos)</option>
    <option value="NON">Non-profit (2 mos)</option>
  </select>
</div>

<script>
  $(document).ready(function() {
    $("#block-yui_3_17_2_1_1635989652851_13463").show();
    $("#block-yui_3_17_2_1_1640582524994_14253").hide();
    $("#block-yui_3_17_2_1_1640582524994_15520").hide();
    $("#block-yui_3_17_2_1_1640582524994_16772").hide();
    $("#block-yui_3_17_2_1_1640582524994_18056").hide();
    $("#block-yui_3_17_2_1_1640582524994_19360").hide();
    $("#block-yui_3_17_2_1_1640582524994_20686").hide();
    $("#block-yui_3_17_2_1_1640582524994_22034").hide();
  });
  
  $('#selection') .on('change', function () {
    if(this.value === "SEL"){
      $("#block-yui_3_17_2_1_1635989652851_13463").show();
      $("#block-yui_3_17_2_1_1640582524994_14253").hide();
      $("#block-yui_3_17_2_1_1640582524994_15520").hide();
      $("#block-yui_3_17_2_1_1640582524994_16772").hide();
      $("#block-yui_3_17_2_1_1640582524994_18056").hide();
      $("#block-yui_3_17_2_1_1640582524994_19360").hide();
      $("#block-yui_3_17_2_1_1640582524994_20686").hide();
      $("#block-yui_3_17_2_1_1640582524994_22034").hide();
    } else if(this.value === "RET"){
      $("#block-yui_3_17_2_1_1635989652851_13463").hide();
      $("#block-yui_3_17_2_1_1640582524994_14253").show();
      $("#block-yui_3_17_2_1_1640582524994_15520").hide();
      $("#block-yui_3_17_2_1_1640582524994_16772").hide();
      $("#block-yui_3_17_2_1_1640582524994_18056").hide();
      $("#block-yui_3_17_2_1_1640582524994_19360").hide();
      $("#block-yui_3_17_2_1_1640582524994_20686").hide();
      $("#block-yui_3_17_2_1_1640582524994_22034").hide();
    } else if(this.value === "DIS"){
      $("#block-yui_3_17_2_1_1635989652851_13463").hide();
      $("#block-yui_3_17_2_1_1640582524994_14253").hide();
      $("#block-yui_3_17_2_1_1640582524994_15520").show();
      $("#block-yui_3_17_2_1_1640582524994_16772").hide();
      $("#block-yui_3_17_2_1_1640582524994_18056").hide();
      $("#block-yui_3_17_2_1_1640582524994_19360").hide();
      $("#block-yui_3_17_2_1_1640582524994_20686").hide();
      $("#block-yui_3_17_2_1_1640582524994_22034").hide();
    } else if(this.value === "CON"){
      $("#block-yui_3_17_2_1_1635989652851_13463").hide();
      $("#block-yui_3_17_2_1_1640582524994_14253").hide();
      $("#block-yui_3_17_2_1_1640582524994_15520").hide();
      $("#block-yui_3_17_2_1_1640582524994_16772").show();
      $("#block-yui_3_17_2_1_1640582524994_18056").hide();
      $("#block-yui_3_17_2_1_1640582524994_19360").hide();
      $("#block-yui_3_17_2_1_1640582524994_20686").hide();
      $("#block-yui_3_17_2_1_1640582524994_22034").hide();
    } else if(this.value === "MAN"){
      $("#block-yui_3_17_2_1_1635989652851_13463").hide();
      $("#block-yui_3_17_2_1_1640582524994_14253").hide();
      $("#block-yui_3_17_2_1_1640582524994_15520").hide();
      $("#block-yui_3_17_2_1_1640582524994_16772").hide();
      $("#block-yui_3_17_2_1_1640582524994_18056").show();
      $("#block-yui_3_17_2_1_1640582524994_19360").hide();
      $("#block-yui_3_17_2_1_1640582524994_20686").hide();
      $("#block-yui_3_17_2_1_1640582524994_22034").hide();
    } else if(this.value === "GEN"){
      $("#block-yui_3_17_2_1_1635989652851_13463").hide();
      $("#block-yui_3_17_2_1_1640582524994_14253").hide();
      $("#block-yui_3_17_2_1_1640582524994_15520").hide();
      $("#block-yui_3_17_2_1_1640582524994_16772").hide();
      $("#block-yui_3_17_2_1_1640582524994_18056").hide();
      $("#block-yui_3_17_2_1_1640582524994_19360").show();
      $("#block-yui_3_17_2_1_1640582524994_20686").hide();
      $("#block-yui_3_17_2_1_1640582524994_22034").hide();
    } else if(this.value === "PRO"){
      $("#block-yui_3_17_2_1_1635989652851_13463").hide();
      $("#block-yui_3_17_2_1_1640582524994_14253").hide();
      $("#block-yui_3_17_2_1_1640582524994_15520").hide();
      $("#block-yui_3_17_2_1_1640582524994_16772").hide();
      $("#block-yui_3_17_2_1_1640582524994_18056").hide();
      $("#block-yui_3_17_2_1_1640582524994_19360").hide();
      $("#block-yui_3_17_2_1_1640582524994_20686").show();
      $("#block-yui_3_17_2_1_1640582524994_22034").hide();
    } else if(this.value === "NON"){
      $("#block-yui_3_17_2_1_1635989652851_13463").hide();
      $("#block-yui_3_17_2_1_1640582524994_14253").hide();
      $("#block-yui_3_17_2_1_1640582524994_15520").hide();
      $("#block-yui_3_17_2_1_1640582524994_16772").hide();
      $("#block-yui_3_17_2_1_1640582524994_18056").hide();
      $("#block-yui_3_17_2_1_1640582524994_19360").hide();
      $("#block-yui_3_17_2_1_1640582524994_20686").hide();
      $("#block-yui_3_17_2_1_1640582524994_22034").show();
    }
});
</script>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<style>
.industrial{text-align:center;border-radius:6px;width:285px;display:flex;flex-flow:row wrap;align-items:center;margin:auto;box-sizing:border-box;padding-bottom:35px}
.industry{
    height: 35px;
    width: 80%;
    margin: auto;
    border: 1px solid #009051;
    border-radius: 0.4em;
    background-color: #209d50;
    color: #fff;
    text-align: center;
    font-size: .7rem;
}
</style>

Something is wrong with my html combobox code. It is not working!

Recommended Posts

Ciodensky

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

tuanphan

Link to comment

Ciodensky

Link to comment

Ciodensky

Link to comment

Create an account or sign in to comment

News

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources