CODEWITHSUNDEEP
javascriptjquery
user8758206
user8758206

Reputation: 2191

Display the relevant div & hide the others when relevant option selected

I'm trying to learn jQuery and want to be able to:

  1. (achieved) display the price when the relevant option is selected
  2. hide the other backgrounds & only display the relevant background when clicking the button (i.e. choosing 'option 2' should display 'div-2').

Why cannot I achieve 2?

Apologies for this being part JS & part JQ, but I do not know JQ very well. If the JS could be converted to JQ I'd really appreciate that :)

function updatePrice() {
    $('#priceSpan').html(
  $('#selector').find('option:selected').data('price'));
    }

function rightBG() {
  var divToDisplay = $('#selector').find('option:selected').data('div-id');
  var els = document.getElementsByClassName('options');
  
  for (i=0; i<els.length; i++) {
    var el = els[i];
    el.style.display='none';
  }
  
  divToDisplay.style.display='block';
}
#selector {
  width: 300px;
  height: auto;
}
#div-1{
  width: 100%;
  height: 50px;
  background: yellow;
}
#div-2{
  width: 100%;
  height: 50px;
  background: lightblue;
}
#div-3{
  width: 100%;
  height: 50px;
  background: lightgreen;
}
#priceSpan {
  background: orange;
}
.options {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<select onchange="updatePrice()" id="selector">
  <option class="options" value="id-1" data-price="10" data-div-id="#div-1">choice 1</option>
  <option class="options" value="id-2" data-price="20" data-div-id="#div-2">choice 2</option>
  <option class="options" value="id-3" data-price="30" data-div-id="#div-3">choice 3</option>
</select>

<div id="div-1">div 1</div>
<div id="div-2">div 2</div>
<div id="div-3">div 3</div>
<span id="priceSpan">Price here</span>

<button onclick="rightBG()">View Relevant Background</button>

Upvotes: 0

Views: 53

Answers (1)

Neil
Neil

Reputation: 14321

I'd create a containing div and then show the relevant div (if it's already showing, nothing will happen) and then hide it's siblings.

$(myOption.data('div-id')).show().siblings().hide();


function updatePrice() {
  var myOption = $('#selector').find('option:selected');
  $('#priceSpan').html(myOption.data('price'));
  $(myOption.data('div-id')).show().siblings().hide();
}

function rightBG() {
  var myOption = $('#selector').find('option:selected');  $(document.body).css("background-color",$(myOption.data('div-id')).css("background-color"));
}
#selector {
  width: 300px;
  height: auto;
}
#div-1{
  width: 100%;
  height: 50px;
  background: yellow;
}
#div-2{
  width: 100%;
  height: 50px;
  background: lightblue;
}
#div-3{
  width: 100%;
  height: 50px;
  background: lightgreen;
}
#priceSpan {
  background: orange;
}
.options {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<select onchange="updatePrice()" id="selector">
  <option class="options" value="id-1" data-price="10" data-div-id="#div-1">choice 1</option>
  <option class="options" value="id-2" data-price="20" data-div-id="#div-2">choice 2</option>
  <option class="options" value="id-3" data-price="30" data-div-id="#div-3">choice 3</option>
</select>
<div class="div-container">
  <div id="div-1">div 1</div>
  <div id="div-2">div 2</div>
  <div id="div-3">div 3</div>
</div>
<span id="priceSpan">Price here</span>

<button onclick="rightBG()">View Relevant Background</button>

Upvotes: 1

Related Questions