jqTransform .change(), generate new select jqTransform

The consequence using jqtransform is that we can not easily play with jquery (e.g for ajax purpose). There are two common question about jqtransform dropdown / select :

  1. onChange effect or .change() in jquery
  2. generate new select with several option(s)

My friend suggested that I shouldn’t did it in ajax, but challenge accepted!

A B C D

CASE #1 .change() effect

if you want to gain the same effect in jqTransform dropdown :

$('#box select').change(function(){
//some function
//get selected
});

Equal with :

 $("#box div.jqTransformSelectWrapper ul li a").click(function(){
      //some function
      //get selected
      alert($("#box option:selected").val());
 }

CASE #2 $(‘select’).append(html) effect

$('#box select').html(options); //or append; where options are html of option collection

Equal with :

// reinit the jqTransform
 $('#box').html(select); // where select is the full html select including the options
 $('#box').jqTransform();

Example

I need to produce list of products from list of company. First, I need first dropdown to list company then generate the second dropdown based on the value of company that have been selected.

Here is the HTML. I have init the jqtransform in div with class “form”:

<div id="select-company">
Company :
<select name="company_id">
<option> -- </option>
  <?php foreach($company as $item){ ?>
  <option value="<?php echo $item['company_id'];?>"><?php echo $item['name'];?></option>
  <?php } ?>
</select>
</div>
<div id="select-product">
Product :
<select name="company_id">
<option> -- </option>
  <?php foreach($company as $item){ ?>
  <option value="<?php echo $item['company_id'];?>"><?php echo $item['name'];?></option>
  <?php } ?>
</select>
</div>
</div>

and the javascript :

$(function(){
	$('#select-product').hide();
	$("#select-company div.jqTransformSelectWrapper ul li a").click(function(){
		$('#select-product').show();
		$('#select-product').html('');
		var company_id =  $("#select-company option:selected").val();
		$.ajax('get_product/'+company_id , null, function(resp) {
			var opt = jQuery.parseJSON(resp);
			var select = '<select name="product_id">';
			for(var i = 0; i < opt.length; i++){
				select += '<option value="'+ opt[i]['product_id'] +'"> '+ opt[i]['product_name'] +'</option>';
			}
			select += '</select>';
			$('#select-product').html(select);
			$('#select-product').jqTransform();
		});
	});
});

3 pemikiran pada “jqTransform .change(), generate new select jqTransform

  1. Hi there,

    I know it is long time from this post, but I have a project recently and still using jqTransform as it is only plugin I found. So I had a look at the “onchange” issue, and could fix it completely. Here is code I am using:
    // Fix “onchange” event for dropdown select
    $(“div.jqTransformSelectWrapper ul li a”).click(function(){
    var $this = $(this);
    var selected_val = $this.attr(‘index’);
    selected_val = ‘option:eq(‘+selected_val+’)’;
    var selected_parent = $this.parents(‘div.jqTransformSelectWrapper’);
    var selected_select = $(‘select.jqTransformHidden’, selected_parent);

    $(selected_val, selected_select).attr(‘selected’, ‘selected’).change();
    });

    Hope it helps someone..

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s