javascript - Creating a dropdown without using a select box

I want to put multiple distinct pages into one html page. I have each page option in a dropdown and then when you select the item the content for that item appears. Right now I'm using a select box for the dropdown, but is there anyway I can make a dropdown for this without using select? I would like to add customizations to the dropdown that you cant do if you are using a select box. **I want the dropdown to still include all of my distinct page

This is kind of what I'm trying to get the dropdown to look like. Centered, and when the dropdown appears there is no border and the background is white so it looks like it is apart of the page. I would like to change the font of all the items, etc.

jsfiddle - /

$("#drop").on('change', function() {
  var value = $(this).val();
  if (value) {
    $(".page").hide();
    $("#Page" + value).show();
  }
});

<script src=".1.1/jquery.min.js"></script>
<select id="drop">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<div id="Page1" class="page" style="">
  Content of page 1
</div>
<div id="Page2" class="page" style="display:none">
  Content of page 2
</div>
<div id="Page3" class="page" style="display:none">
  Content of page 3
</div>

jsfiddle - https://jsfiddle/

$("#drop").on('change', function() {
  var value = $(this).val();
  if (value) {
    $(".page").hide();
    $("#Page" + value).show();
  }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="drop">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<div id="Page1" class="page" style="">
  Content of page 1
</div>
<div id="Page2" class="page" style="display:none">
  Content of page 2
</div>
<div id="Page3" class="page" style="display:none">
  Content of page 3
</div>

Share Improve this question edited Jun 28, 2017 at 15:01 asked Jun 28, 2017 at 14:44 user7548188

What customization do you refer to? – Milney Commented Jun 28, 2017 at 14:45
you can use a library like select2.github.io – Michael Coker Commented Jun 28, 2017 at 14:46
Have you tried styling the select with CSS? All the customizations you mentioned should be possible with a standard select... – Milney Commented Jun 28, 2017 at 14:54
Yes I have tried, but you can't center the text. And you can't style the actual select dropdown box. – user7548188 Commented Jun 28, 2017 at 14:58
@user7548188 Check out my article: Evolution of Drop Down Menus and Exiting Them. Does it help? – Praveen Kumar Purushothaman Commented Jun 28, 2017 at 15:00

Add a ment |

5 Answers 5

Sorted by: Reset to default 1

$('.selectbox__selected').click(function() {
  $('.selectbox__values').toggle();
});

$('.selectbox__item').click(function() {
  var value = $(this).text();
  
  $('.selectbox__selected').attr('data-value', value);
  $('.selectbox__selected').html(value);
  
  $('.selectbox__values').toggle();
});

* {
  box-sizing: border-box;
  margin: 0;
}

.selectbox {
  position: relative;
  width: 200px;
  height: 30px;
}

.selectbox__selected {
  width: 100%;
  height: 30px;
  padding: 5px 10px;
  text-align: center;
}

.selectbox__values {
  position: absolute;
  top: 30px;
  width: 200px;
  display: none;
  text-align: center;
}

.selectbox__item {
  padding: 5px;
  width: 100%;
  height: 30px;
  cursor: pointer;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selectbox">
  <div class="selectbox__selected" data-value="value 0">value 0</div>
  <div class="selectbox__values">
    <div class="selectbox__item" data-value="value 1">value 1</div>
    <div class="selectbox__item" data-value="other value 2">oteher value 2</div>
    <div class="selectbox__item" data-value="another value 3">another value 3</div>
  </div>
</div>

Here is something similar to the picture you provided. background-colors used to make things distinct.

$("span").html("Page: 1");
$("#Page1").show();

$("li").on('click', function() {
  var value = $(this).val();
  if (value) {
    $(".page").hide();
    $("#Page" + value).show();
    $("span").html("Page: " + value);
  }
});

ul{
  display: none;
  margin: 0;
  padding: 0;
  background-color: pink;
  position: absolute;
  width: 75px;
}

.page{
  display:none;
}

#drop:hover > ul{
  display: block;
}

#drop{
  background-color: lightgreen;
  width: 75px;
  text-align:center;
}

li{
  list-style: none;
  text-align: center;
}

li:hover{
  background-color: lightblue;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="drop">
  <span></span>
  <ul>
    <li value="1">1</li>
    <li value="2">2</li>
    <li value="3">3</li>  
  </ul>
</div>

<div id="Page1" class="page" style="">
  Content of page 1
</div>
<div id="Page2" class="page" style="display:none">
  Content of page 2
</div>
<div id="Page3" class="page" style="display:none">
  Content of page 3
</div>

Ok so I assume you don't like the tabs solutions so let's stick to your styles dropdown goal.

I would simply remand you to install a jquery library that makes all the hard work for you. Il actually take your select box and make it themable. Theres many many options you can find my googling it, but i personnaly like this one.

EDIT : Here's my jsfiddle answer https://jsfiddle/1m05ubwc/2/

$("#drop").niceSelect().on('change', function() {
  var value = $(this).val();
  if (value) {
    $(".page").hide();
    $("#Page" + value).show();
  }
});

Here it is some sample version ;]

$('.options li').on('click', function() {
  $('.selected').html( $(this).text() );
  $('.selected-inp').val( $(this).data('value') ).trigger('change');
  $('.options').removeClass('show');
});

$('.selected').on('click', function() {
  $('.options').toggleClass('show');
});

$('.selected-inp').on('change', function(ev) {
  $('.result').html('The new value is: ' + ev.target.value);
});

.dropdown {
   position: relative;
  height: 30px;
}
.selected {
  width: 100px;
  border: 1px solid #eee;
  padding: 6px 10px;
  cursor: pointer;
}
.options {
  position: absolute;
  width: 100px;
  bottom: -50px;
  left: 0;
  display: none;
  border: 1px solid #eee;
  border-top: none;
  list-style: none;
  margin: 0;
  padding:0;
}
.options.show {
  display: block;
}

.options li {
  background: #eee;
  cursor: pointer;
  padding: 3px;
}
.options li:hover {
  background: #ccc;
}
.result { margin-top: 20px; }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <div class="selected">Select value</div>
  <input class="selected-inp" type="hidden">
  <ul class="options">
    <li data-value="1">Opt 1</li>
    <li data-value="2">Opt 2</li>
  </ul>
</div>
<div class="result"></div>

Improved to make it handle more like a select box:

multiple drop on same page
added name, easier for form submission
added show, option to show name when selected in span
added selected, similiar to select box
using attr instead of val, now handles text options
using inline-blocks and white-space to make auto-expand

hope you find useful

/* initialize */
$(".drop").each(function() {
  var selected = $(this).find('li[selected]');
  var name = $(this).attr('name');
  var value = selected.length > 0 ? selected.attr('value') : "";
  var show = $(this).attr('show');
  
  // Update span
  if (show) {
    $(this).find("span").html(name + ": " + value);  
  }else{
    $(this).find("span").html(value);
  }
  
  // Demo
  $("#demo-name").html(name);
  $("#demo-value").html(value);
});


/* event */
$(".drop li").on('click', function() {
  var drop = $(this).closest('div');
  var name = drop.attr('name');
  var value = $(this).attr('value');
  var show = drop.attr('show');
  
  // Update span
  if (show) {
    drop.find("span").html(name + ": " + value);  
  }else{
    drop.find("span").html(value);
  }
  
  // Demo
  $("#demo-name").html(name);
  $("#demo-value").html(value);
});

/* dropdown */

.drop{
  width: 75px;
  cursor: pointer;
  display: inline-block;
}

.drop:hover > ul{
  display: block;
}

.drop li{
  list-style: none;
  text-align: center;
  text-align: left;
  padding: 1px 4px 1px 4px;
  white-space: nowrap;
}

.drop li:hover{
  background-color: #777;
  color: #fff;
}

.drop span{
  white-space: nowrap;
  text-align:center;
  border: 1px solid #eee;
  background-color: #eee;
  display: inline-block;
  padding: 3px 6px 3px 6px;
  min-height: 20px;
  vertical-align: middle; 
}

.drop span:hover{
  background-color: #333;
  color: white;
}

.drop ul{
  display: none;
  margin: 0;
  padding: 0;
  position: absolute;
  min-width: 75px;
  background-color: #ccc;
  color: #333;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Simple (name/values as integers):  
<div class="drop" name="Option" show="1">
  <span></span>
  <ul>
    <li value="1">1</li>
    <li value="2" selected>2</li>
    <li value="3">3</li>  
  </ul>
</div>

<br>

Simple (with no name): 
<div class="drop" name="Simple">
  <span></span>
  <ul>
    <li value="1">1</li>
    <li value="2">2</li>
    <li value="3">3</li>  
  </ul>
</div>

<br>

Vehicle (long name/value): 
<div class="drop" name="Vehicle" show="1">
  <span></span>
  <ul>
    <li value="Boat with really long name">Boat with really long name</li>
    <li value="Car" selected>Car</li>
    <li value="Truck">Truck</li>  
  </ul>
</div>

<br><br>
<b>Selected name</b>: <span id="demo-name"></span><br>
<b>Selected value</b>: <span id="demo-value"></span>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Creating a dropdown without using a select box - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)