Di chuyển tới link khi click option trong select

Đôi khi bạn muốn hiển thị danh sách chuyên mục hoặc bài viết trong select box, và bạn muốn khi click vào option thì hệ thống sẽ tự động chuyển bạn đến trang tương ứng với đối tượng bạn đã chọn. Để làm được việc này thì bạn phải sử dụng form hoặc là áp dụng một vài thủ thuật JavaScript.

Bài này mình sẽ lấy ví dụ hàm wp_dropdown_categories của WordPress. Hàm này có chức năng là hiển thị các chuyên mục dưới dạng select box hoặc gọi là dropdown list.

<h2><?php _e('Categories:'); ?></h2>
<form id="category-select" class="category-select" action="<?php echo esc_url(home_url('/')); ?>" method="get">
	<?php wp_dropdown_categories('show_count=1&hierarchical=1'); ?>
	<input type="submit" name="submit" value="view" />
</form>

Với ví dụ bên trên, khi bạn nhấn nút submit của form thì trang sẽ tự động chuyển bạn sang trang chủ với tham số trên url là cat với id tương ứng trong option bạn đã chọn. Hệ thống sẽ tự động chuyển bạn sang url của chuyên mục nếu như bạn đang dùng nice permalink trên blog.

<h2><?php _e('Posts by Category'); ?></h2>
<?php wp_dropdown_categories('show_option_none=Select category'); ?>
<script type="text/javascript">
	<!--
	var dropdown = document.getElementById("cat");
	function onCatChange() {
		if(dropdown.options[dropdown.selectedIndex].value > 0) {
			location.href = "<?php echo esc_url(home_url('/')); ?>?cat="+dropdown.options[dropdown.selectedIndex].value;
		}
	}
	dropdown.onchange = onCatChange;
	-->
</script>

Trường hợp bạn không muốn sử dụng form thì có thể chuyển sang dùng JavaScript như bên trên, khi người dùng chọn chuyên mục thì chỉ cần thay đổi đường dẫn của trình duyệt thành địa chỉ tương ứng với id của chuyên mục.

<h2><?php _e('Posts by Category'); ?></h2>
<form id="category-select" class="category-select" action="<?php echo esc_url(home_url('/')); ?>" method="get">
	<?php
	$args = array(
		'show_option_none' => __('Select category'),
		'show_count' => 1,
		'orderby' => 'name',
		'echo' => 0,
	);
	?>
	<?php $select = wp_dropdown_categories($args); ?>
	<?php $replace = "<select$1 onchange='return this.form.submit()'>"; ?>
	<?php $select = preg_replace('#<select([^>]*)>#', $replace, $select); ?>
	<?php echo $select; ?>
	<noscript>
		<input type="submit" value="View" />
	</noscript>
</form>

Bên trên là trường hợp cụ thể nhất, bạn không muốn hiển thị nút submit của form nhưng vẫn sẽ kiểm tra trình duyệt có hỗ trợ JavaScript hay không, trường hợp không có JavaScript thì nút submit sẽ hiển thị cho người dùng lựa chọn.

Với bài viết hướng dẫn nhỏ này hy vọng nó sẽ giúp ích được bạn trong quá trình nghiên cứu và lập trình WordPress. Vẫn còn nhiều bài viết nữa, bạn hãy nhớ theo dõi blog thường xuyên để cập nhật thông tin nhé. Chúc bạn thành công.

Lại Đình Cường