时间戳

首页 > 解决方案 > 如何使我的网页中的选择标签可滚动

html - 如何使我的网页中的选择标签可滚动

问题描述

我的索引页面的代码。目的是确保网页搜索部分中使用的选择标签可滚动。当我尝试滚动浏览每个选择标签中的选项时，整个网页都会移动。

<!-- Search Section Begin -->
<section class="search-section spad">
    <div class="container">
        <div class="row">
            <div class="col-lg-7">
                <div class="section-title">
                    <h4>Where would you rather live?</h4>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="change-btn">
                    <div class="cb-item">
                        <label for="cb-rent" class="active">
                            For Rent
                            <input type="radio" id="cb-rent">
                        </label>
                    </div>
                    <div class="cb-item">
                        <label for="cb-sale">
                            For Sale
                            <input type="radio" id="cb-sale">
                        </label>
                    </div>
                </div>
            </div>
        </div>
       <div class="search-form-content">
            <form action="{% url 'search' %}" class="filter-form">
            <div>
                <select class="sm-width">
                    <option value="">Chose The City</option>
                </select>
                </div>
                <div >
                <select class="sm-width" name='state'>
                   <option >Location</option>
                    {% for key, value in state_choices.items %}
                    <option value="{{ key }}" >{{ value }}</option>
                    {% endfor %}
                </select>
                </div>
                <div>
                <select class="sm-width" name='property_status' >
                    <option >Property Status</option>
                    {% for key, value in property_status_choices.items %}
                    <option value="{{ key }}" >{{ value }}</option>
                    {% endfor %}
                </select>
                </div>
                <div>
                <select class="sm-width" name='property_type'>
                    <option >Property Type</option>
                    {% for key, value in property_type_choices.items %}
                    <option value="{{ key }}" >{{ value }}</option>
                    {% endfor %}
                </select>
                </div>
                <div>
                <select class="sm-width" name='bedroom'>
                    <option selected='true' disabled="disabled">No Of Bedrooms</option>
                     {% for key, value in bedroom_choices.items %}
                    <option value="{{ key }}" >{{ value }}</option>
                    {% endfor %}
                </select>
                </div>
                <div>
                <select class="sm-width" name='bathroom'>
                    <option selected='true' disabled="disabled">No Of Bathrooms</option>
                    {% for key, value in bathroom_choices.items %}
                    <option value="{{ key }}" >{{ value }}</option>
                    {% endfor %}
                </select>
                </div>
                <div class="room-size-range-wrap sm-width">
                    <div class="price-text">
                        <label for="roomsizeRange">Size:</label>
                        <input type="text" id="roomsizeRange" readonly>
                    </div>
                    <div id="roomsize-range" class="slider"></div>
                </div>
                <div class="price-range-wrap sm-width">
                    <div class="price-text">
                        <label for="priceRange">Price:</label>
                        <input type="text" id="priceRange" readonly>
                    </div>
                    <div id="price-range" class="slider"></div>
                </div>
                <button type="button" class="search-btn sm-width">Search</button>
            </form>
        </div>

我的视图代码用于在我的索引页面中显示信息

from django.shortcuts import render
from properties.models import Property
from properties.choices import bedroom_choices, property_type_choice, 
property_status_choice, bathroom_choices, state_choices


# Create your views here.
def index(request):
    properties = Property.objects.order_by('-list_date')[:6]

    context={
        'properties': properties,
        'bedroom_choices': bedroom_choices,
        'bathroom_choices': bathroom_choices,
        'state_choices': state_choices,
        'property_type_choices':property_type_choice,
        'property_status_choices': property_status_choice,
    }
    return render(request, 'pages/index.html', context)

我正在谈论的部分部分的图像。在此处输入图像描述

对于视图中导入的choices.py，使用的项目字典如下所示

property_status_choice= {
'Rent': 'Rent',
'Sale': 'Sale'
}
property_type_choice= {
    '1':'All',
    '2':'Apartment',
    '3':'House',
    '4':'Office',
    '5':'Hotel',
    '6':'Restaurent'
}
bedroom_choices = {
  '1':1,
  '2':2,
  '3':3,
  '4':4,
  '5':5,
  '6':6,
  '7':7,
  '8':8,
  '9':9,
  '10':10
  }
bathroom_choices = {
  '1':1,
  '2':2,
  '3':3,
  '4':4,
  '5':5,
  '6':6,
  '7':7,
  '8':8,
  '9':9,
  '10':10
  }
state_choices = {
    'AK': 'Alaska',
    'AL': 'Alabama',
    'AR': 'Arkansas',
    'AS': 'American Samoa',
    'AZ': 'Arizona',
    'CA': 'California',
    'CO': 'Colorado',
    'CT': 'Connecticut',
    'DC': 'District of Columbia',
    'DE': 'Delaware',
    'FL': 'Florida',
    'GA': 'Georgia',
    'GU': 'Guam',
    'HI': 'Hawaii',
    'IA': 'Iowa',
    'ID': 'Idaho',
    'IL': 'Illinois',
    'IN': 'Indiana',
    'KS': 'Kansas',
    'KY': 'Kentucky',
    'LA': 'Louisiana',
    'MA': 'Massachusetts',
    'MD': 'Maryland',
    'ME': 'Maine',
    'MI': 'Michigan',
    'MN': 'Minnesota',
    'MO': 'Missouri',
    'MP': 'Northern Mariana Islands',
    'MS': 'Mississippi',
    'MT': 'Montana',
    'NA': 'National',
    'NC': 'North Carolina',
    'ND': 'North Dakota',
    'NE': 'Nebraska',
    'NH': 'New Hampshire',
    'NJ': 'New Jersey',
    'NM': 'New Mexico',
    'NV': 'Nevada',
    'NY': 'New York',
    'OH': 'Ohio',
    'OK': 'Oklahoma',
    'OR': 'Oregon',
    'PA': 'Pennsylvania',
    'PR': 'Puerto Rico',
    'RI': 'Rhode Island',
    'SC': 'South Carolina',
    'SD': 'South Dakota',
    'TN': 'Tennessee',
    'TX': 'Texas',
    'UT': 'Utah',
    'VA': 'Virginia',
    'VI': 'Virgin Islands',
    'VT': 'Vermont',
    'WA': 'Washington',
    'WI': 'Wisconsin',
    'WV': 'West Virginia',
    'WY': 'Wyoming'
}

标签： htmlcssdjango

解决方案

您可以将 a 设置height为下拉容器并使其滚动使用overflow-y: auto;

推荐阅读