Jump to content

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

Go to solution Solved by Ciodensky,

Recommended Posts

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>

 

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

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() {

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Link to comment
  • Solution

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>

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.