Hide Select Box/ Option field - display result

Page 1 of 1

4 Replies - 910 Views - Last Post: 13 September 2012 - 11:10 AM

#1 Nykc  Icon User is offline

  • Gentleman of Leisure
  • member icon

Reputation: 701
  • View blog
  • Posts: 8,581
  • Joined: 14-September 07

Hide Select Box/ Option field - display result

Posted 13 September 2012 - 07:58 AM

Okay I am a little confused with this task I have been given and looking for some advice on how to proceed.

The problem: We have a new UI with a plug n play type option boxes. (eg. Size, color, shape) when I select a size - let's say medium for example it will display the selection and the options box will disappear. Most likely on a pageload. It will then display an edit option next to it in case the user changes his/her mind.

Here is the example form I am using...
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CPI Purchase PNP Options</title>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="assets/css/reset.css" media="screen">
    <link rel="stylesheet" type="text/css" href="assets/css/custom.css" media="all">
    <script src="assets/js/pnp.js"></script>
    <meta name="generator" content="">
  </head>
  <body>
    <div id="container">
      <header>
        <nav>
        </nav>
      </header>

      <section id="review-cart">
      <table class="cart-contents">
        <tr class="background">
          <td colspan="5">&nbsp;</td>
        </tr>
        <tr>
          <th class="th item">Item</th>
          <th class="th unit-price">Unit Price</th>
          <th class="th quantity">Quantity</th>
          <th class="th subtotal">Subtotal</th>
        </tr>
        <tr>
          <td class="item">Test Tangible
            <div class="options">
              <span>Size: <br />
                <select name="option_0_173244530" id="pnp-option">
                  <option value="Choose">Choose</option>
                  <option value="173244550">small - .99</option>
                  <option value="173244570">Medium - 1.00</option>
                  <option value="173244590">Large - 2.00</option>
                </select>
              </span>
              <a class="update" href="#">Update</a><br />
              <span>Color:<br />
                <select name="option_0_3904622337" id="pnp-option">
                  <option value="Choose">Choose</option>
                  <option value="173244700">Red</option>
                  <option value="173244720">Blue</option>
                  <option value="173244740">Green</option>
                </select>
              </span>
              <a class="update" href="#">Update</a>
            </td>
            <td class="unit-price">€0.09</td>
            <td class="quantity"><input value="1" name="product_index_0" maxlength="3" type="number" min="1" max="999">
              <a class="update" href="#">Update</a>
            </td>
            <td class="subtotal">€0.09</td>
        </tr>
      </table>
      <p>Pick Me, Pick Me!</p>
      </section>

      <footer>
      </footer>
    </div><!-- #site-wrapper -->
  </body>
</html>


Some basic CSS
#container #review-cart table {
  font-size: 12px;
  margin-bottom: 60px;
  position: relative;
  width: 100%;
}

table {
  border-collapse: seperate;
  border-spacing: 0;
}

#container #review-cart table .background {
  background: #6F889B;
  left: 0;
  opacity: 0.15;
  position: absolute;
  top: 0;
  width: 100%;
}

#container #review-cart table .background td {
  height: 30px;
  margin: 0;
  padding: 0;
}

#container #review-cart table .item {
  font-weight: bold;
  max-width: 45%;
  width: 45%;
}

#container #review-cart table .unit-price {
  max-width: 15%;
  text-align: right;
  width: 15%;
}

#container #review-cart table .quantity {
  max-width: 20%;
  text-align: right;
  width: 20%;
}

#container #review-cart table .subtotal {
  font-weight: bold;
  max-width: 15%;
  text-align: right;
  width: 15%;
}

#container #review-cart table td.item {
  line-height: 18px;
}

#container #review-cart table .item .options {
  color: #6C6C6C;
  font-size: 11px;
  font-weight: bold;
  line-height: 14px;
  margin-top: 5px;
}

#container #review-cart table .item .options span {
  display: inline-block;
  max-width: 210px;
  overflow: hidden;
}

#container #review-cart table .item .options select {
  font-size: 11px;
  margin: 0 5px;
}

#container #review-cart table tr td {
  border-top: 1px solid #E2E2E2;
  font-size: 13px;
  height: 30px;
  line-height: 30px;
  padding: 10px 10px 5px;
}

caption, td, td {
  font-weight: normal;
  text-align: left;
}


And the Jquery I started using
$(document).ready(function() {
  $("option").click(function() {
    $(this).hide();
  });
});


The Jquery is way off of course and what I am looking for here is a start to this not necessarily the answer to my problem. I have limited JQuery experience and I have yet to find a ecommerce site or website that does something similar for guidance.

Any suggestions are greatly appreciated

Thanks in advance

Is This A Good Question/Topic? 0
  • +

Replies To: Hide Select Box/ Option field - display result

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2935
  • View blog
  • Posts: 7,687
  • Joined: 08-June 10

Re: Hide Select Box/ Option field - display result

Posted 13 September 2012 - 08:11 AM

if the user should be able to edit his choice, why not leaving the select box as is?
Was This Post Helpful? 0
  • +
  • -

#3 Nykc  Icon User is offline

  • Gentleman of Leisure
  • member icon

Reputation: 701
  • View blog
  • Posts: 8,581
  • Joined: 14-September 07

Re: Hide Select Box/ Option field - display result

Posted 13 September 2012 - 08:14 AM

That's the logical thing to do, but apparently they want the result displayed and give the user the ability to edit. I can post a screen shot of the expected behaviour. Let me go to my dev machine and snatch the mock-up.

Posted Image


After some further research googling and looking into ajax - this is similar to the behaviour I believe is expected. http://click.avoka.c...ajax-select.htm

This post has been edited by Nykc: 13 September 2012 - 09:02 AM

Was This Post Helpful? 0
  • +
  • -

#4 MisterPoppet  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 2
  • Joined: 07-June 11

Re: Hide Select Box/ Option field - display result

Posted 13 September 2012 - 11:06 AM

Some jQuery to help you out.

An HTML Edit to each option. Making the id into a class is a good idea (id's are supposed to be unique). And I've added a span as a container for the selected choice.
<span>
    Size: <br />
        
    <select name="option_0_173244530" class="pnp-option">
        <option value="Choose">Choose</option>
        <option value="173244550">small - .99</option>
        <option value="173244570">Medium - 1.00</option>
        <option value="173244590">Large - 2.00</option>
    </select>
    
    <span class="option-choice" style="display:none;">
    </span>
</span>



Here's the javascript. The first bit looks at the select box and fires the function when there's a change. It'll then hide the select box, look for the span container and fill that container with the choice text and a link to edit. The next bit of javascript sees when a edit link is clicked and hides the container and shows the related select box.
$(document).ready(function() {
    $(".pnp-option").change(function() {
        var choice = $(this).html();
        var sibling = $(this).siblings('span.option-choice');
        
        $(this).hide();
        sibling.html(choice + ' <a class="edit-choice">Edit</a>');
        sibling.show()
    });
    
    $(".edit-choice").click(function() {
        var parent = $(this).parent('span.option-choice');
        var select = parent.siblings(".pnp-option");
        
        parent.hide();
        select.show();
        
        return false;
    });
});



I'll be glad to answer any questions.


Cheers,
Bryan
Was This Post Helpful? 1
  • +
  • -

#5 Nykc  Icon User is offline

  • Gentleman of Leisure
  • member icon

Reputation: 701
  • View blog
  • Posts: 8,581
  • Joined: 14-September 07

Re: Hide Select Box/ Option field - display result

Posted 13 September 2012 - 11:10 AM

Yes I think this is exactly what I need, I will play around for a bit and see what comes of it.

Thank you for your help
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1