Convert Dropdown to Selection Boxes with Color and Trigger Drop Down Action

Convert dropdown to selection boxes with color and trigger drop down action

i think this code will help you that you want to do

Html

<table class="variations" cellspacing="0">
  <tbody>
    <tr>
      <td class="label">
        <label for="pa_available-colors">Available Colors : </label>
      </td>
      <td class="value">
        <select id="pa_available-colors" class="" name="attribute_pa_available-colors" data-attribute_name="attribute_pa_available-colors">
          <option value="" selected="selected">Choose an option</option>
          <option value="black" class="attached enabled">Black</option>
          <option value="white" class="attached enabled">White</option>
          <option value="red" class="attached enabled">Red</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

CSS

.selectbox>span {
  padding: 10px;
  border: 2px solid #fff;
  display: inline-block;
  vertical-align: middle;
}

.selectbox {
  border: 1px solid #dddddd;
  display: inline-block;
  cursor: pointer;
}

.selectbox.active {
  border: 1px solid #333;
}

JQuery

$("#pa_available-colors option").each(function() {
  //get values of all option
  var val = $(this).val();

  //do magic create boxes like checkbox
  $("td.value").append('<div class="selectbox" data-color="' + val + '"><span style="background-color:' + val + '"></span></div>');

});
//remove empty selectbox
$('.selectbox[data-color=""]').remove();

//change select box on click
$(".selectbox").click(function() {
  //remove selected from others
  $(".selectbox").removeClass("active");
  //do active to selected
  $(this).addClass("active");
  //get value
  var optVal = $(this).data("color");

  $("#pa_available-colors").val(optVal) 

});

//change select box on dropdown change
$("#pa_available-colors").change(function(){
    var optVal = $(this).val();
  $(".selectbox").removeClass("active");
  $(".selectbox[data-color='"+optVal+"']").addClass("active");
})

here is fiddle

Convert dropdowns to radio buttons w/o modifying HTML

Hide the dropdown and place the new radio elements outside the form, they don't need to post, just update the dropdown value.

Here is a code example on jsFiddle.

$("#d option").each(function(i, e) { // get the options
    $("<input type='radio' name='r' />") // create a radio element
        .attr("value", $(this).val()) // set the value
        .attr("checked", i == 0) // check the first by default
        .click(function () { // add event click which updates the dropdown
            $("#d").val($(this).val()); // update the dropdown if clicked
        })
        .appendTo("#r"); // append to some visible place
});

Help with changing DropDown event to Radio Button triggers - javascript

Form: change the select element to this.

<label for="sales_rental0">Properties For Sale</label><input type="radio" id="sales_rental0" name="sales_rental" value="S" checked />
<label for="sales_rental1">Properties To Let</label><input type="radio" id="sales_rental1" name="sales_rental" value="L" />

change $(document).ready to this.

$(document).ready(function(){
    onChange(document.propsearch_res);

    $("input[name=sales_rental]").click(function(){
        onChange(document.propsearch_res);
    });
});

then you should also remove the id in your radio button since id is unique and remove the onChange event on the radio button.

For your onChange function change to this.

function onChange(obj) {
    var n = 1;
    obj.price_low.options.length = 0;
    obj.price_high.options.length = 0;

    if (getRadioButtonValue(obj.sales_rental) == "S")
    {
        setsel(obj,"Any Price","","0");
        setsel(obj,"£30,000","30000",n);n=n+1;
        setsel(obj,"£40,000","40000",n);n=n+1;
        setsel(obj,"£50,000+","",n);n=n+1;
    } else {
        setsel(obj,"Any p/month","","0");
        setsel(obj,"£300","300",n);n=n+1;
        setsel(obj,"£400","400",n);n=n+1;
        setsel(obj,"£500+","",n);n=n+1;
    }    
}

Lastly add this function in your script.

function getRadioButtonValue(radio) {
    if(radio.length > 0) {
        for(var i=0; i<radio.length; i++) {
            if(radio[i].checked) {
                return radio[i].value;
            }
        }  
    }
}

Edit:

For the scripts dropdown menu's don't put the <scripts> inside the <select> tag.

Convert the dropdown to radio or just use javascript/jquery to change selections?

First, you need to consider the people who would use your application. Dropdown list would be a little bit annoying for users who have slow connections especially that you've said that this is for your ecommerce site. Your site would possible be dealing multiple end-users with different attitudes.

Dropdown list

The list items are hidden until the user clicks on the dropdown list and scroll for the items. This would matter if we are to judge for user interface issues. More client would prefer click and click and click rather than click and scroll.

Buttons

The items are already display directly to the enduser and it is just a matter of knowing on what to click. And just by looking and page, the end-users will know what items are available and the thing is it is easier for them to choose.

Cross-Browser Issues

That can be dealt anytime. There are many ways to make your script work on any browser. You might spend more time dealing with css problems rather than javascript issues with regards to browser compatibilities. So far the common problem with javascipts is when the client disables the javascripts to run on their browser. You can either decide to use server side controls to be sure.

Change value of dropdown to null if specific change is made to radio button, but not just any change

My own take on your problem is the following:

$('input[type="radio"][name="item_meta[101]"]').change(
    function(){
        // testing if the chosen value is equal to '4' (all input values are strings):
        var valCheck = this.value === '4';

        // setting the value of the select:
        $('select[name="item_meta[106]"]').val(function(){
            /* setting to 'null' if the valCheck evaluates to true, otherwise returning
               the currently-selected value: */
            return valCheck ? 'null' : this.value;
        });
    });

JS Fiddle demo.

References:

Attribute-equals [attribute="value"] selector.
change().
val().

Html Select - Option, Selected color as value

You can colorize the selected element at the top of the selection by simpy doing:

$('#fontColorMenu option').each(function(index,item){

    $(item).css('background-color',$(this).val());//Colorize the items

})

$('#fontColorMenu').select().change(function(){

  $(this).css('background-color',$(this).val());//Colorize the box

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="fontColorMenu">

  <option value="0">Select...</option>

  <option value="#FF0000">#FF0000</option>

  <option value="#00FF00">#00FF00</option>

  <option value="#0000FF">#0000FF</option>

</select>

Custom CSS for dropdown box

Most likely an issue of z-index. Searching your CSS doesn't show any mention of it, which would make it follow the static flow, which means it would be shown under any subsequently-placed or higher z-index elements.

The linked example doesn't have any other elements on the page, so this isn't a problem. Changing the z-index of the popup element to something arbitrarily large may fix the problem.

_{(Originally a comment but solved the question, posting here for future visitors.)}

dropdown value change according to radio button

You can have something like this:

<script>
  var listA = [{name:'1am', value:'1am'}, {name:'2am', value:'2am'}, {name:'3am', value:'3am'}];
  var listB = [{name:'12', value:'12'}, {name:'13', value:'13'}, {name:'14', value:'14'}];
</script>

<script>
  $(document).ready( function() {
    $('#class').bind('click', function() {
      $('#describe').empty();                              
      $.each(listA, function(index, value) {
        $('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
      });
    });

    $('#Club').bind('click', function(){
      $('#describe').empty();                              
      $.each(listB, function(index, value) {
        $('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
      });
    });
  });
</script>

Hope this helps you.

Jquery dependent drop down boxes populate- how

var drop2 = $("select[name=drop2] option"); // the collection of initial options
$("select[name=drop1]").change(function(){
    var drop1selected = parseInt(this.value); //get drop1 's selected value
    $("select[name=drop2]")
                     .html(drop2) //reset dropdown list
                     .find('option').filter(function(){
                        return parseInt(this.value) < drop1selected; //get all option with value < drop1's selected value
                      }).remove();  // remove
});

Convert Dropdown to Selection Boxes with Color and Trigger Drop Down Action